v-model 绑定checkbox select 以及v-model的修饰符
//这种处理方式，只要checkbox选中，就自动加入到了数组中，取消选中就从数组中移除了
<input type="checkbox" value="篮球" v-model="loves">篮球
<input type="checkbox" value="足球" v-model="loves">足球
<input type="checkbox" value="乒乓球" v-model="loves">乒乓球
<input type="checkbox" value="羽毛球" v-model="loves">羽毛球
<script>
export default{
data(){
return {
loves:[]
}
}
}
</script>
//select选中那个值，fruit对应的值就是那个
<select name="test" id="" v-model="fruit">
<option value="苹果" >苹果</option>
<option value="香蕉" >香蕉</option>
<option value="榴莲" >榴莲</option>
<option value="葡萄" >葡萄</option>
</select>
<script>
export default{
data(){
return {
fruit:'香蕉'
}
}
}
</script>
//select选中那个值，fruits数组中就对应添加那个值
<select name="test" id="" v-model="fruits " multiple>
<option value="苹果" >苹果</option>
<option value="香蕉" >香蕉</option>
<option value="榴莲" >榴莲</option>
<option value="葡萄" >葡萄</option>
</select>
<script>
export default{
data(){
return {
fruits:[]
}
}
}
</script>
v-model的修饰符
-
lazy
v-model 是每次修改都会绑定值，添加了 lazy 就只会在回车后或者失去焦点后绑定
使用
v-model.lazy = 'msg' -
number
默认以 string 类型保存在 data 中，通过 number 修饰符可以以 number 类型存入 data 中
使用
<input type="number" v-model.number='msg'/> // input 的类型为 number 只能输入数字,如果没有修饰符，保存到 data 中仍然是 string 类型 -
trim
去除字符串两边的空字符
使用
v-model.trim = 'msg'注：一般浏览器显示的时候不会显示字符串的空格，但在 data 中存在
