文章目录
基本概念
表单控件在实际开发中是很常见的，Vue中使用v-model指令来实现表单元素和数据的双向绑定
基本使用
最重要的特征是表单元素和数据的双向绑定
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello world"
}
})
</script>
</body>
v-model原理
- 实现双向绑定的原理 相当于两个指令的集合。分别是v-on和v-bind
- v-model其实是一个语法糖，它本质上包含两个操作：
（1）v-bind绑定一个Value属性
（2）v-on指令给当前元素绑定input事件
使用v-bind
只使用v-bind只能实现数据响应
<body>
<div id="app">
//<!-- 只使用v-bind-->
<input type="text" :value="message" >
{{message}}
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello world"
}
})
</script>
</body>
v-bind和v-on同时使用
v-bind和v-on同时使用与v-model效果相同
（1）当输入框输入内容时，因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变
（2）message发生改变时，因为使用了Mustache语法，于是将message的值插入到DOM中，DOM发生响应的改变
<body>
<div id="app">
//<!-- @input监听用户输入-->
<input type="text" :value="message" @input="change">
<input type="text" :value="message" @input="message = $event.target.value">
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello world"
},
methods:{
//事件对象
change(event) {
this.message = event.target.value;
}
}
})
</script>
</body>
v-model结合radio使用
具体详解请看注释
<body>
<div id="app">
//<!-- 可以省略name -->
<label for="man">
<input type="radio" id="man" value="男" v-model="sex">男
</label>
<label for="woman">
<input type="radio" id="woman" value="女" v-model="sex">女
</label>
<h2>您的选择是：{{sex}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
//默认选中。也可以没有默认选中，则为空
sex:"男"
},
})
</script>
v-model结合checkbox使用
单选框
具体详解请看注释
<body>
<div id="app">
//<!-- 单选框 -->
<label for="agreement">
<input type="checkbox" name="" id="agreement" v-model="isagree">同意协议
</label>
<h2>您选择的是：{{isagree}}</h2>
//动态绑定disabled属性
<button :disabled="!isagree">下一步</button>
<br>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
//设置默认值
isagree:false
},
})
</script>
</body>
多选框
<body>
<div id="app">
//<!-- 多选框 -->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的爱好选择是：{{hobbies}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
//可以设置默认值
hobbies:["足球"]
}
})
</script>
</body>
v-model结合select使用
select 同 checkbox 相类似，同样有单选和多选的区别
<body>
<div id="app">
// <!-- 单选 -->
<select name="habit" v-model="hobby">
<option value="篮球" >篮球</option>
<option value="足球" >足球</option>
<option value="羽毛球">羽毛球</option>
</select>
<h2>您最喜欢的运动是：{{hobby}}</h2>
// <!-- 多选 -->
<select name="habit" v-model="hobbies" multiple >
<option value="篮球" >篮球</option>
<option value="足球" >足球</option>
<option value="羽毛球">羽毛球</option>
</select>
<h2>您最喜欢的运动有：{{hobbies}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
hobby:'',
//可以设置默认值
hobbies:["足球"]
}
})
</script>
</body>
值绑定
值绑定就是动态地给value赋值。
在上面的例子中，input的value值都是在定义input的时候直接给定的。但在真实开发中，这些value值可能是从网络后台上获取或定义在data中的。所以我们就需要通过v-bind:value动态地给value赋值，看例子
<body>
<div id="app">
<span v-for="hobby in arr">
<input type="checkbox" :value="hobby" :id="hobby" v-model="hobbies" >{{hobby}}
</span>
<h2>您最喜欢的运动有：{{hobbies}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
//数据由data定义
arr:["足球","篮球","羽毛球"],
hobbies:[]
}
})
</script>
</body>
v-model修饰符
lazy修饰符
（1）默认情况下，v-model默认是在input事件中同步输入框的数据的，即一旦有数据发生改变时，对应的data中的数据就会自动发生改变
（2）lazy修饰符可以让数据在失去焦点或者回车时才会更新
<body>
<div id="app">
//未使用修饰符
<input type="text" v-model="message1">
<h2>{{message1}}</h2>
//使用修饰符
<input type="text" v-model.lazy="message2">
<h2>{{message2}}</h2>
</div>
<script src="../vue.js"></script>
<script
var app = new Vue({
el:'#app',
data:{
message1:"hello1",
message2:"hello2"
}
})
</script>
</body>
number修饰符
（1）默认情况下，在输入框中无论我们输入的时字母还是数字，都会被当作字符串类型进行处理
（2）如果我们希望处理的是数字类型，那么最好直接将内容当作数字处理
（3）number修饰符可以让在输入框中输入的内容自动转成数字类型
<body>
<div id="app">
//未使用修饰符
<input type="number" v-model="num1">
<h2>{{num1}}-{{typeof num1}}</h2>
//使用修饰符
<input type="number" v-model.number="num2">
<h2>{{num2}}-{{typeof num2}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
num1:0,
num2:0
}
})
</script>
</body>
trim修饰符
（1）如果输入的内容首尾有很多空格，通常我们希望将其去除
（2）trim修饰符可以过滤内容左右两边的空格
<body>
<div id="app">
//未使用修饰符
<input type="text" v-model="name1">
<h2>{{name1}}</h2>
//使用修饰符
<input type="text" v-model.trim="name2">
<h2>{{name2}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
name1:'',
name2:''
}
})
</script>
</body>
