[toc]
基础语法金和原理
你可以用 v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的
value、checked、selected attribute的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。
v-model在内部为不同的输入元素使用不同的property并抛出不同的事件text和textarea元素使用valueproperty和input`事件checkbox和radio使用checkedproperty和change`事件select字段将value作为prop并将change作为事件
-
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
- v-model其实是一个语法糖，它的背后本质上是包含两个操作：
- 1.v-bind绑定一个value属性
- 2.v-on指令给当前元素绑定input事件
- 实现原理
<input type="text" v-model="message">
等同于
<input type="text" :value="message" @input="message = $event.target.value">
修饰符
- 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">
<h2>绑定input输入框</h2>
<input type="text" v-model="message"><br>
<!-- 等同于 -->
<input type="text" :value="message" @input="message = $event.target.value">
<br>
{{message}}
<h2>结合radio使用</h2>
<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>
<h5>您选择的性别是: {{sex}}</h5>
<h2>结合checkbox使用</h2>
<h4>单选框</h4>
<!-- 单选框如果选择, 为true,未选中值为false, 配合isAagreement变量来使用 -->
<!-- button 如果disabled属性为true, 则不允许点击, 为false时才可以点击, 配合isAagreement变量取反来使用,只有选中的时候才能点击下一步 -->
<input type="checkbox" v-model="isAgreement">同意协议<br>
<button :disabled="!isAgreement">下一步</button>
<h4>多选框</h4>
<!--定义一个空的变量devops, 进行双向绑定, 当选中时, 追加到数组中-->
<input type="checkbox" value="linux" v-model="devopsCheckbox">linux
<input type="checkbox" value="python" v-model="devopsCheckbox">python
<input type="checkbox" value="kubernetes" v-model="devopsCheckbox">kubernetes
<input type="checkbox" value="javaScript" v-model="devopsCheckbox">javaScript
<br>
<!--使用值绑定的方式, 使用后端传过来的数组进行循环-->
<label v-for="item in devopsCheckboxs">
<input type="checkbox" :value="item" v-model="devopsCheckbox">{{item}}
</label>
<h5>您选择的是: {{devopsCheckbox}}</h5>
<h2>结合select选择框使用</h2>
<h4>单选框</h4>
<select name="books" v-model="devopsBook">
<option value="linux">linux</option>
<option value="python">python</option>
<option value="kubernetes">kubernetes</option>
<option value="javaScript">javaScript</option>
</select>
<h5>您选择的是: {{devopsBook}}</h5>
<h4>复选框</h4>
<select name="books" v-model="devopsBooks" multiple>
<option value="linux">linux</option>
<option value="python">python</option>
<option value="kubernetes">kubernetes</option>
<option value="javaScript">javaScript</option>
</select>
<h5>您选择的是: {{devopsBooks}}</h5>
</div>
<script src="../js/vue.v2.6.12.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'baiyongjie',
sex: '男', // 如果不定义值, 则上面的选择是默认不选择的
isAgreement: false, // 单选框, 默认不选择
devopsCheckbox: [], // 复选框, 默认都不选择
devopsCheckboxs: ['linux', 'python', 'kubernetes', 'javaScript', 'prometheus'], // 复选框, 这种情况是后端提供一个数组,然后前端进行值绑定,
devopsBook: 'python', // select单选框, 默认选择python
devopsBooks: [], // select复选框, 默认选择python
}
})
</script>
</body>
</html>
修饰符使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app2">
<!--1. 修饰符: lazy, 懒加载, 只有用户按下回车或失去焦点是才会执行-->
<input type="text" v-model.lazy="message1">
<p>您输入的是: {{message1}}</p>
<!--2. 修饰符: number, 默认输入的都是字符串,加上number后会将类型转换为number -->
<input type="text" v-model.lazy.number="age">
<p>类型: {{typeof age}} 值: {{age}}</p>
<!--3. 修饰符: trim, 去除输入框头部和尾部的空白字符 -->
<input type="text" v-model.trim="message2">
<p>{{message2}}</p>
</div>
<script src="../js/vue.v2.6.12.js"></script>
<script>
const app2 = new Vue({
el: '#app2',
data: {
message1: 'baiyongjie',
message2: 'xiaotiantian',
age: 18,
}
})
</script>
</body>
</html>
