1.基本应用
(a)输入框(input),文本域(textarea)
<div id="app">
<input v-model="message"/>
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '输入框内容'
}
})
</script>
(b)复选框(type='checkbox')
<div id="app">
<p>单个复选框:</p>
<input type="checkbox" v-model="checked">
<p>多个复选框:</p>
<input type="checkbox" value="val001" v-model="checkedNames">
<input type="checkbox" value="val002" v-model="checkedNames">
<input type="checkbox" value="val003" v-model="checkedNames">
</div>
<script>
new Vue({
el: '#app',
data: {
checked : true, //单复选框初始化-选中
checkedNames: [] //多复选框初始化-都不选中
}
})
</script>
(c)单选按钮(type='radio')
<div id="app">
<input type="radio" value="val001" v-model="picked">
<br>
<input type="radio" value="val002" v-model="picked">
<br>
<span>选中值为: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked : 'val001' //第一个单选按钮初始化为选中状态
}
})
</script>
(d)下拉菜单(select)
<div id="app">
<select v-model="selected">
<option value="0">0000</option>
<option value="1">1111</option>
<option value="2">2222</option>
</select>
<p>选择的是: {{selected}} </p>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: '2' //初始化-选择value=2的选项
}
})
</script>
2.双向绑定修饰符
(a).lazy (转变同步事件)
默认情况下, v-model 在 input 事件中同步输入框的值与数据,添加一个修饰符 lazy ,转变为在 change 事件中同步。
<input v-model.lazy="msg" >
(b).number (格式化输入值为数字类型,一般用于type=‘number’中)
将用户的输入值转为 Number 类型(原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 。
<input v-model.number="age" type="number">
(c).trim (去除收尾空格)
自动过滤用户输入的首尾空格(中间空格无法处理),可以添加 trim 修饰符到 v-model 上过滤输入。
<input v-model.trim="msg" value=" 收尾空格不会输出 ">
3.常用场景(待补充)
场景一:全选&取消全选
<div id="app">
<input type="checkbox" v-model="checked" @change="changeAllChecked()">{{checked}}
<br/>
<input type="checkbox" value="val001" v-model="checkedNames">val001
<input type="checkbox" value="val002" v-model="checkedNames">val002
<input type="checkbox" value="val003" v-model="checkedNames">val003
<br/>
<span>
选择的值为:{{checkedNames}}
</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false,
checkedNames: [],
checkedArr: ["val001", "val002", "val003"]
},
methods: {
changeAllChecked: function() {
if (this.checked) {
this.checkedNames = this.checkedArr
} else {
this.checkedNames = []
}
}
},
watch: {
"checkedNames": function() {
if (this.checkedNames.length == this.checkedArr.length) {
this.checked = true
} else {
this.checked = false
}
}
}
})
</script>
场景二:表单校验
<div id="app">
<input v-model.trim="val" @keydown="changeInput()"/>
//监听输入框变化最好不要用change,可能会无效
<span style="color:red"> {{msg}} </span>
</div>
<script>
new Vue({
el:"#app",
data:{
val:"",
msg:"此为必填项!"
},
methods:{
changeInput:function(){
if(String(this.val).length==0){
this.msg="此为必填项!"
}else{
this.msg=""
}
}
}
})
</script>