1.簡單使用：
當input里面的值發生變化的時候，就會自動把變化后的值，系結到Vue物件上去了
<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 .trim
.lazy
對于輸入元素，默認的行為方式是一旦有資料變化，馬上進行系結，但是加上.lazy之后，相當于監聽change操作，只有在失去焦點的時候，才會進行資料系結了
<input v-model.lazy="name" />{{name}}<br />
.number
有時候，拿到了資料需要進行數學運算， 為了保證運算結果，必須先把型別轉換為number型別，而v-model默認是string型別，所以就可以通過.number方式確保獲取到的是數字型別了，
<input type="number" v-model.number="name" />{{name}}<br />
.trim
trim 去掉前后的空白
<input v-model.trim="name" />{{name}}<br />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/151745.html
標籤：JavaScript
上一篇：JavaScript自學筆記（2）---function a(){} 和 var a = function(){}的區別（javascript)
下一篇：2019年度前端知識點總結