vue(五)--雙向綁定（v-model）

時間 2020-02-02

標籤 vue 雙向綁定 model 简体版

原文原文鏈接

1.簡單使用：app

當input裏面的值發生變化的時候，就會自動把變化後的值，綁定到Vue對象上去了spa

<body>
        <div id="app">
            <input v-model="name" />{{name}}<br />
            <textarea v-model="t"></textarea>{{t}}<br/>
            <input type="checkbox" v-model="c"/>{{c}}<br/>
            <input type="radio" id="one" value="One" v-model="r">
            <input type="radio" id="one" value="Two" v-model="r">
            {{r}}
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    name:'1',
                    t:'',
                    c:'',
                    r:''
                }
            })
        </script>
</body>

2.修飾符：.lazy .number .trim3d

.lazycode

　　對於輸入元素，默認的行爲方式是一旦有數據變化，立刻進行綁定。可是加上.lazy以後，至關於監聽change操做，只有在失去焦點的時候，纔會進行數據綁定了對象

<input v-model.lazy="name" />{{name}}<br />

.numberblog

　　有時候，拿到了數據須要進行數學運算，爲了保證運算結果，必須先把類型轉換爲number類型，而v-model默認是string類型，因此就能夠經過.number方式確保獲取到的是數字類型了。ip

<input type="number" v-model.number="name" />{{name}}<br />

.triminput

　　trim 去掉先後的空白數學

<input v-model.trim="name" />{{name}}<br />

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。