基本用法
VUE提供了v-model指令， 用于在表单类元素上双向绑定事件
input和textarea
可以用于input框，以及textarea等
注意： 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value.
代码示例：
<body>
<div id = "app">
v-model的input框用法：<br/>
<input type = "text" v-model = "value"><br>
{{value}}
<hr/>
v-model的textarea框的用法：<br/>
绑定了v-model，初始化的指不会显示
<textarea name = "" id = "" cols = "30" rows = "10" v-model = "msg">我是多行文本的初始化值</textarea><br/>
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
value: '',
msg: '休闲鞋'
}
})
</script>
</body>
单选按钮
-
单个单选按钮，直接用
v-bind绑定一个布尔值，用v-model是不可以的 -
如果是组合使用，就需要
v-model来配合value使用，绑定选中的单选框的value值，此处所绑定的初始值可以随意给，也可以不给初始值。
3.代码示例：
<body>
<div id = "app">
单选框：<hr/>
单个单选框:<br/>
oneradio为true,默认选中单选框。
<input type = "radio" name = "" v-bind:checked = "oneradio"><hr/>
多个单选框：<br/>
跑步：<input type = "radio" name = "checks" value = "跑步" v-model = "checkName">
游泳：<input type = "radio" name = "checks" value = "游泳" v-model = "checkName">
射击：<input type = "radio" name = "checks" value = "射击" v-model = "checkName">
<br/>
现在选中的是-----------{{checkName}}
</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,
checkName: '跑步' //初始值
}
})
</script>
</body>
复选框
-
单个复选框，直接用定一个布尔值，可以用
v-model可以用v-bind -
多个复选框– 如果是组合使用，就需要
v-model来配合value使用，v-model绑定一
个数组—如果绑定的是字符串，则会转化为true，false，与所有绑定的复选框的checked属性相对应。 -
若绑定的是一个数组，则会把value存放在数组中。
-
代码示例
<body>
<div id = "app">
单个复选框：<br/>
v-bind:<input type = "checkbox" v-bind:checked = "onecheckbox"><br/>
v-model:<input type = "checkbox" v-model = "onecheckbox">
<hr>
多个复选框:<br/>
跑步：<input type = "checkbox" value = "跑步" v-model = "checks">
游泳：<input type = "checkbox" value = "游泳" v-model = "checks">
射击：<input type = "checkbox" value = "射击" v-model = "checks"><br/>
现在选中哦了{{checks}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
onecheckbox: true,
checks: [] //此处为数组和字符串的渲染是不一样的。
}
})
</script>
</body>
下拉框
-
如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优先匹配一个value值，没有value就匹配一个text值。但是value的值不会存放在数组中，而是转换成字符串。
-
如果是多选，就需要
v-model来配合value使用，v-model绑定一个数组，与复选框类似，value的值会存放在数组里。 -
v-model一定是绑定在select标签上 -
代码示例
<body>
<div id = "app">
单选的下拉框：
<select v-model = "selected">
<option value = "跑步">跑步</option>
<option value = "游泳">游泳</option>
<option value = "射击">射击</option>
</select>
<!-------现在选中的是 {{selected}}-->
<hr/>
多选的下拉框：
<select v-model = "selected" multiple>
<option value = "跑步">跑步</option>
<option value = "游泳">游泳</option>
<option value = "射击">射击</option>
</select>
-------现在选中的是 {{selected}}
</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: []
}
})
</script>
</body>
总结：
-
如果是单选，初始化最好给定字符串，因为vmodel此时绑定的是静态字符串或者布尔值
-
如果是多选，初始化最好给定一个数组
绑定值
单选按钮
- 单选按钮：只需要用
v-bind给单个单选框绑定一个value值，此时，v-model绑定的就是他的value值.
<input type = "radio" v-model = "picked" v-bind:value = "value">------{{picked}}
复选框
<input type = "checkbox" v-model = "toggle" :true-value = "value1" :false-value = "value2">
下拉框
在select标签上绑定value值对option并没有影响.value绑在select和option上的结果是不一样的。
代码示例
<body>
<div id = "app">
绑定值--单选按钮：<br/>
<input type = "radio" v-model = "picked" v-bind:value = "value">------{{picked}}
<hr/>
绑定值--复选框按钮：（选中和不选中的Value不一样）<br/>
<input type = "checkbox" v-model = "toggle" :true-value = "value1" :false-value = "value2">
--------------{{toggle}}<br/>
被选中--------------{{toggle == value1}}<br/>
未被选中--------------{{toggle == value2}}
<hr>
绑定值--下拉框：<br/>
<select v-model = "selected" :value = "{num:111}">
<option value = "跑步">跑步</option>
</select>
-------现在选中的是 {{typeof selected}} --- {{selected}}
<!--
<select v-model = "selected" }">
<option :value = "{num:111}">跑步</option>
</select>
-------现在选中的是 {{typeof selected}} --- {{selected.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: {
picked: true,
value: '111',
toggle: true,
value1: '我被选中了',
value2: '我没有被选中',
selected: ''
}
})
</script>
</body>
修饰符
- lazy
v-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其在失去焦点或者敲回车键之后在更新
<input type = "text" v-model.lazy = "inputstr"> ----{{inputstr}}
- number
将输入 的字符串转化为number类型
<input type = "text" v-model.number = "isNumber">----{{ typeof isNumber}}
- trim
trim自动过滤输入过程中首尾输入的空格
<input type = "text" v-model.trim = "trimStr">----------{{trimStr.split('').length}}
网友评论