• <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >Vue.js

    「Vue.js開發連載九」vue.js指令v-model
    時間: 2018-11-09 10:32:35     來源: 卓象IT實訓基地【原創】

    上一篇文章講解“vue.js指令v-on”,本篇文章講解“vue.js指令v-model”。


    雙向數據綁定v-model:

    現階段,注意是現階段可簡單的理解為,讓多個元素(或組件)都綁定同一個值的時候,一個元素改變該值,另一個元素也會因此而發生變化(樣式/dom結構等)的功能叫雙向數據綁定。


    1. 雙向數據綁定應用

    【例】一個簡單的v-model的了解。

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model



    2. 表單組件綁定

    你可以用v-model指令在表單<input>及<textarea>元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇,但v-model本質上不過是語法。它負責監聽用戶的輸入事件以更新數據,并對一些極端場景進行一些特殊處理。

    「Vue.js開發連載九」vue.js指令v-model


    1)基礎用法

    v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue實例的數據作為數據來源。你應該通過JavaScript 在組件的data選項中聲明初始值。

    ①文本

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    ②多行文本

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    注:vue對象中,定義變量message。

    ③復選框

    a. 單個復選框,綁定到布爾值:

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    b. 多個復選框,綁定到同一個數組:

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    注意

    1. 單個復選框,綁定到布爾值,返回true或false。

    2. 多個復選框綁定到同一數組,值為復選框value。

    ④單選按鈕

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    ⑤下拉列表

    a. 單選時

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    注意

    1. 如果v-model表達式的初始值未能匹配任何選項,<select>元素將被渲染為“未選中”狀態。在iOS中,這會使用戶無法選擇第一個選項。因為這樣的情況下,iOS不會觸發change 事件。因此,更推薦像上面這樣提供一個值為空的禁用選項。

    b. 多選時

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    2)修飾符

    ① .lazy

    在默認情況下,v-model在每次input事件觸發后將輸入框的值與數據進行同步(除了上述輸入法組合文字時)。你可以添加lazy修飾符,從而轉變為使用change事件進行同步:

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    ② .number

    如果想自動將用戶的輸入值轉為數值類型,可以給v-model添加number修飾符:

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    注意

    1. 這通常很有用,因為即使在type="number"時,HTML輸入元素的值也總會返回字符串。

    ③ .trim

    如果要自動過濾用戶輸入的首尾空白字符,可以給v-model添加trim修飾符:

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    測驗:

    1. 用input和textarea同時“雙向綁定”同一個數值,同時通過這個數值來控制一個div的高度,用checkbox來控制其是否有邊框,用radio控制其是否顯示,用select控制其背景色。

    測驗:(以下僅作為參考)

    「Vue.js開發連載九」vue.js指令v-model


    瀏覽器訪問:

    「Vue.js開發連載九」vue.js指令v-model


    Vue.js連載為卓象程序員原創,轉載請聯系卓象程序員

    「Vue.js開發連載九」vue.js指令v-model


    關注卓象程序員,定期發布技術文章

    下一篇講解“vue.js指令v-cloak”

    「Vue.js開發連載九」vue.js指令v-model
    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
  • <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>