v-model 双向数据绑定以及修饰符
<!--v-model 实现双向数据绑定 其中一个值发生改变,另一个值也将实时发生改变--> <div id="app09"> <h1>{{ message }}</h1> <input v-model="message" /> </div> 调用: Study_V_Model("#app09"); 实现 function Study_V_Model(obj) { new Vue({ el: obj, data: { message:'' } }) }
<!--number修饰符 限制只能输入 数字--> {{ typeof(value) }}{{ value }}<input v-model.number="value"> <!--lazy 懒加载 文本框的内容输完才会更新值,不会实时的更新--> {{ typeof(value) }}{{ value }}<input v-model.lazy="value"> <!--trim 去掉首位的空格--> {{ typeof(value) }}{{ value }}<input v-model.trim="value"> <span> </div> <script> new Vue({ el:"#app01", data:{ message:'aaa', isActive: true, color:'red', value:1 } }) </script>