1. v-model在input中的实例
当使用如上代码时,样式如下:
输入框内并没有显示“请输入地名地址”字样,其原因是:
- v-model官方给出的说发是:这其实是一个简写的形式,v-model实际执行的是下面的绑定:
- v-model是动态绑定值到value,然后监听input的inpit事件获取值后赋给dataA的一个过程。因此默认的value不会显示,仅会在初始化渲染时短暂显示。
- 当我们要实现这个效果时,需要用到 placeholder :
- placeholder 这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari、IE)。
- PS:优先级 v-model > value > placeholder,当v-model与value都为空字符串时,placeholder才生效
见代码:
<body>
<div id="app">
<input type="text" v-model="msg" placeholder="请输入">
{{ msg }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "",//双向数据绑定,空字符串使得placeholder生效
}
})
</script>
</body>
效果:
2. v-model对应的数据为input的value属性,在checkbox中则不同
(1)checkbox案例1:
<body>
<div id="app">
<input type="checkbox" v-model="msg">
{{ msg }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
msg: '',
}
})
</script>
</body>
- 勾选为true,取消勾选为false
- 且data中msg如果初始化为true,则checkbox默认选中
到这里让人会有在checkbox里,v-model对应的值为true或false,似乎和checked属性有关
(2)chexkbox案例2:
<body>
<div id="app">
<input type= "checkbox" v-model= "msg" value= "angular" >angular <br/>
<input type= "checkbox" v-model= "msg" value= "react" >react <br/>
<input type= "checkbox" v-model= "msg" value= "vue" >vue <br/>
{{ msg }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
msg: '',
}
})
</script>
</body>
- 可以看到有了value属性,v-model 对应的msg 依然是true或false
那么之前的猜想难道是正确的吗?我们来改一点代码,通常v-model对应的都是字符串,这次我们初始化为空数组[ ]
(3)checkbox案例3 :
var app = new Vue({
el: "#app",
data: {
msg:[]//将msg:''改为[]
}
})
- 可以看到,选中谁,谁的value就会添加到数组里,
- 且数据是双向绑定的,所以,当我们初始化数据的数组里赋予上面的value值时,所对应的checkbox便会默认选中
3. 总结
“ 我 ”在网上找了很久,没有发现一个特别清楚的解释,所以在这里发表一下自己的理解:
- 1.checkbox和普通input一样,点击勾选其实就是输入value,而输入value会改变checked属性,所以会选中
当v-model 对应“字符串”时会解析“字符串”为布尔值, v-model对应有值或是true,checkbox都会选中。 - 2.当v-model对应“数组”时有勾表示已选中,相当于赋值给,相当于有value,v-model对应value,
- 没有value属性时,点勾相当于将(“null”)赋值给value——>v-model( “null” 为字符串),
- 有value属性时,点勾相当于将(value)赋值给value——>v-model,
- 注意数据是双向绑定的,所以数组里的值对应着checkbox的value——>v-model。
- 3.处理表单,v-model一般都是对应字符串,所以处理checkbox的v-model,善用对应布尔值控制勾选。