v-model的⽤法
v-model
本质上是负责监听⽤户的输⼊事件以更新数据
可以看作是value+input⽅法的语法糖
可以绑定v-model的有：input, checkbox, select, textarea, radio
<input v-model="sth/">
//等同于
<input :value="sth" @input="sth = $event.target.value"/>
//在给<input/>元素添加v-model属性时，会默认的把value作为元素的属性，然后把input事件作为实时传递value的触发事件1.v-model实现双向数据绑定
要求：输⼊框默认，当输⼊框输⼊内容时，p标签会在页⾯上⾃动展现输⼊框内的内容
2.v-model.number
要求：输⼊框中输⼊的只能是数字，输⼊其他类型，则⾃动清除
<input type="text" value="默认值" v-model.number="firstipt"/>
3.v-model与radio的结合使⽤
其中name可以没有，
当name⼀样时，男⼥选项⼀次只能选择⼀个，当name不⼀样时，两个选项就可同时选择4.v-model与
checkbox的结合使⽤——单选框
<input type="checkbox" id="agree" v-model="isAgree">同意协议</label>
<h2>您选择的是：{{isAgree}}</h2>
<button :disabled="!isAgree">下⼀步</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
htmlradio的text出不来data:{
message:'你好',
isAgree:'false'
}
})
</script>
</body>
</html>
5.v-model与checkbox的结合使⽤——多选框
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="⾜球" v-model="hobbies">⾜球
<input type="checkbox" value="排球" v-model="hobbies">排球
<input type="checkbox" value="⽹球" v-model="hobbies">⽹球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
</label>
<h2>您的爱好是：{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
hobbies:[]
}
})
</script>
</body>
6.v-model与select的结合使⽤
7.v-model修饰符的使⽤
lazy修饰符——惰性更新
例如：**<input type="text" v-model.lazy="name">**
此时就会发现，改变输⼊框中的内容，如果不按回车键，或者⿏标点击其他地⽅时，输⼊框下⾯的值不会更新，默认情况下nv-model默认是在input事件中同步输⼊框中数据的
number修饰符——将输⼊的字符串转换为数字
trim修饰符——去除前后空格—— im="name"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。