表单控件在实际开发中是极为常见的。特别是对于用户信息的提交,需要大量的表单。Vue中使用v-model指令来实现表单元素和数据的双向绑定。此篇记录下其原理,以及当时学习时候的一些小尝试以及修饰符。
v-model的原理
v-model其实是一个语法糖。v-model不仅可以给input赋值还可以获取input中的数据,而且数据的获取是实时的,因为语法糖中是用@input对输入框进行监听的。它背后的本质实际上是包含着两个操作:1.v-bind绑定一个value属性;2.v-on指令给当前元素绑定input事件。
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message= $event.target.value">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 语法糖写法--> <!--<input type="text" v-model="message">--> <!--<input type="text" :value="message" @input="valueChange">--> <input type="text" :value="message" @input="message = $event.target.value"> <h2>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' }, methods: { valueChange(event) { this.message = event.target.value; } } }) </script> </body> </html>
上述代码中,$event.target.value。$event为当前的事件对象,$event.target.value指的是当前input中的值。methods中的event.target.value的意思为获取当前文本框的值(当事件触发时)。
即等同于:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="message"> {{message}} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body> </html>
v-model:radio
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label for="male"> <input type="radio" id="male" value="男" v-model="sex">男 </label> <label for="female"> <input type="radio" id="female" value="女" v-model="sex">女 </label> <h2>您选择的性别是: {{sex}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', sex: '女' }, methods:{ vm(event){ this.sex= event.target.value } } }) </script> </body> </html>
在学习过程中,遇到了一些需要注意的点:
1、input中的radio,只有name相同时或者使用v-model进行绑定同一事件时,才会产生选择的互斥。
2、label标签中的for绑定的是input中的id名。
3、label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
v-model:checkbox
checkbox的单选框:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--1.checkbox单选框--> <label for="agree"> <input type="checkbox" id="agree" v-model="isAgree">同意协议 </label> <h2>您选择的是: {{isAgree}}</h2> <button :disabled="!isAgree">下一步</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isAgree: false // 单选框 } }) </script> </body> </html>
单个勾选框的情况下,v-model绑定的是个布尔值。
checkbox的多选框:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>您的爱好是: {{hobbies}}</h2> <label v-for="item in originHobbies" :for="item" :key="index"> <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}} </label> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isAgree: false, // 单选框 hobbies: [], // 多选框, originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球'] } }) </script> </body> </html>
v-model:select
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--1.选择一个--> <select name="abc" v-model="fruit"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="榴莲">榴莲</option> <option value="葡萄">葡萄</option> </select>
<h2>您选择的水果是: {{fruit}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
fruit: '香蕉',
fruits: [] } })
</script>
</body>
</html>
v-model修饰符:
v-model有三个修饰符。分别为lazy、number、trim。
lazy修饰符: 默认情况下,v-model默认是在input事件中同步输入框的数据的。 也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。 lazy修饰符可以让数据在失去焦点或者回车时才会更新。
number修饰符: 默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。 但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。number修饰符可以让在输入框中输入的内容自动转成数字类型。
trim修饰符: 如果输入的内容首尾有很多空格,通常我们希望将其去除 trim修饰符可以过滤内容左右两边的空格。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--1.修饰符: lazy--> <input type="text" v-model.lazy="message"> <h2>{{message}}</h2> <!--2.修饰符: number--> <input type="number" v-model.number="age"> <h2>{{age}}-{{typeof age}}</h2> <!--3.修饰符: trim--> <input type="text" v-model.trim="name"> <h2>您输入的名字:{{name}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', age: 0, name: '' } }) </script> </body> </html>