1、基本用法
VUE提供了v-model指令， 用于在表单类元素上双向绑定事件
（1）、input和textarea场景使用
<div id="app">
<input type="text" v-model='inputModel'>
<br>{{inputModel}}
<br>
<textarea name="" id="" cols="30" rows="10" v-model='textareaModel'>我是一名学生</textarea>
<br>{{textareaModel}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
inputModel: '',
textareaModel: '',
},
})
</script>
image.png
注意： 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value
（2）、单选按钮（radio）
<div id="app">
单个单选框：<input type="radio" name="" v-bind:checked="oneradio">
<br>
多个单选框：
<br>
猫蛋：<input type="radio" name="checks" value='猫蛋' v-model="checkRadio">
<br>
狗蛋：<input type="radio" name="checks" value='狗蛋' v-model="checkRadio">
<br>
翠花：<input type="radio" name="checks" value='翠花' v-model="checkRadio">
------现在选中的是:{{checkRadio}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
oneradio: true,
checkRadio: ''
},
})
</script>
image.png
- 单个单选按钮，直接用v-bind绑定一个布尔值，用v-model是不可以的，
- 如果是组合使用，就需要v-model来配合value使用，绑定选中的单选框的value值，此处所绑定的初始值可以随意给。
（3）、复选框（checkbox）
<div id="app">
单个复选框--用v-model：<input type="checkbox" name="" v-model='checkboxModel'>
单个复选框--用v-bind：<input type="checkbox" name="" v-bind：checked=checkboxModel>
<br>
多个复选框：
<br>
猫蛋：<input type="checkbox" value='猫蛋' v-model="checkboxRadio">
<br>
狗蛋：<input type="checkbox" value='狗蛋' v-model="checkboxRadio">
<br>
翠花：<input type="checkbox" value='翠花' v-model="checkboxRadio">
------现在选中的是:{{checkboxRadio}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
checkboxModel: '',
checkboxRadio: [],
},
})
</script>
image.png
1、单个复选框，直接用定一个布尔值，可以用v-model可以用v-bind
2、多个复选框– 如果是组合使用，就需要v-model来配合value使用，v-model绑定一个数组—如果绑定的是字符串，则会转化为true、false，与所有绑定的复选框的checked属性相对应。
（4）下拉框（select）
<div id="app">
单选下拉框：
<select name="" v-model='selected'>
<option value="猫蛋">猫蛋</option>
<option value="狗蛋">狗蛋</option>
<option value="翠花">翠花</option>
</select>---现在选中的是：{{selected}}
<br>
<br>
多选下拉框：
<select name="" v-model='selectedMul' multiple>
<option value="猫蛋">猫蛋</option>
<option value="狗蛋">狗蛋</option>
<option value="翠花" selected>翠花</option>
</select>---现在选中的是：{{selectedMul}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
selected: '',
selectedMul: [],
},
})
</script>
image.png
- 如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优先匹配一个value值，没有value就匹配一个text值
- 如果是多选，就需要v-model来配合value使用，v-model绑定一个数组，与复选框类似
- v-model一定是绑定在select标签上
2、结合绑定值的使用
（1）、单选按钮
<div id="app">
单选框：<input type="radio" name="" v-model='radioValue' v-bind:value='value'>---{{radioValue}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
radioValue: '',
value: '11',
},
})
</script>
image.png
只需要用v-bind给单个单选框绑定一个value值，此时，v-model绑定的就是他的value值
（2）、复选框
<div id="app">
复选框：选中和不选中的value值不一样
<input type="checkbox" name="" v-model='checkboxValue' :true-value='value1' :false-value='value2'>
<br>
{{checkboxValue}}
<br>
我被选中了：{{checkboxValue==value1}}
<br>
我没有被选中：{{checkboxValue==value2}}
<br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
value1: '我被选中了',
value2: '我没有被选中',
checkboxValue: '',
},
})
</script>
image.png
（3）、下拉框
<div id="app">
下拉框：
<select name="" v-model='selectedValue'>
<option value="猫蛋" :value="{num:111}">猫蛋</option>
<option value="狗蛋">狗蛋</option>
<option value="翠花" selected>翠花</option>
</select>---现在选中的是：{{selectedValue.num}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
selectedValue: '',
},
})
</script>
image.png
在select标签上绑定value值对option并没有影响,但是在option上绑定是可以的
3、结合修饰符的使用
（1）、lazy---v-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其在失去焦点或者敲回车键之后在更新。
<div id="app">
<input type="text" v-model='inputStr'>---{{inputStr}}
<br>
<input type="text" v-model.lazy='inputStr2'>---{{inputStr2}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
inputStr: '',
inputStr2: '',
},
})
</script>
image.png
（2）、number--将输入 的字符串转化为number类型
<div id="app">
number类型:<input type="text" v-model.number='isNum'>---{{typeof isNum}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isNum: '',
},
})
</script>
image.png
（3）、trim--自动过滤输入过程中收尾输入的空格
<div id="app">
trim:<input type="text" v-model.trim='toggle'>---{{toggle.split('').length}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
toggle: ''
},
})
</script>
image.png
网友评论