vmodel: 用于在表单类元素上双向绑定事件
用于input框，以及textarea
<div id="app">
<input type="text" value="初始值" v-model="value">
// 1、使用 v-model 绑定 value
{{ value }}
// 2、使用 v-model 绑定 message
<textarea v-model="message" name="" id="" cols="30" rows="10" ></textarea>
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
value: 'hello',
message: ' 你好'
}
})
单个单选按钮 和 多个单选
<div id="app">
单个单选按钮：
<input type="radio" name="" v-model="isChecked"> // 1、单个单选按钮使用 v-model 没用
<br><br>
单个单选按钮：
<input type="radio" name="" v-bind:checked="isChecked"> // 2、单个单选按钮应该使用 v-bind
<br><br>
多个单选按钮：<br>
apple: <input type="radio" name="fruits" value="apple" v-model="checkFruit"> <br>
peach: <input type="radio" name="fruits" value="peach" v-model="checkFruit"> <br>
banana: <input type="radio" name="fruits" value="banana" v-model="checkFruit"> <br>
lemon: <input type="radio" name="fruits" value="lemon" v-model="checkFruit"> <br>
你选择了 -- {{ checkFruit }}
</div>
var app = new Vue({
el: '#app',
data: {
isChecked: true,
checkFruit: 'peach' // 3、checkFruit 的值应该是多个单选按钮中的 value 值，当然也可以是其他值
}
})
- 第一个单选按钮：用的是 v-model，所以没用；
- 第二个单选按钮：用的是 v-bind，有用；
- 第三个多个单选按钮：因为 checkFruit 的值是 peach，所以默认选中 peach 。
单个复选框 和 多个复选框
<div id="app">
单个复选框（使用 v-model）：
<input type="checkbox" name="" v-model="isChecked">
<br><br>
单个复选框（使用 v-bind）：
<input type="checkbox" name="" v-bind:checked="isChecked">
<br><br>
多个复选框：<br>
apple: <input type="checkbox" name="fruits" value="apple" v-model="fruitArr"> <br>
peach: <input type="checkbox" name="fruits" value="peach" v-model="fruitArr"> <br>
banana: <input type="checkbox" name="fruits" value="banana" v-model="fruitArr"> <br>
lemon: <input type="checkbox" name="fruits" value="lemon" v-model="fruitArr"> <br>
</div>
var app = new Vue({
el: '#app',
data: {
isChecked: true,
fruitArr: ['peach']
}
})
- 第一个单个复选框：使用 v-model，有用；
- 第二个单个复选框：使用 v-bind，有用；
- 第三个多个复选框：fruitArr 的值应该是一个数组，如果是字符串，会被自动转成布尔值。这里默认选中了 peach
单选的下拉框 和 多选的下拉框
<div id="app">
单选的下拉框：
<select name="" v-model="checkFruit"> // v-model 应该写在 select 标签上，而不是 option 标签
<option value="apple">apple</option>
<option value="peach">peach</option>
<option value="banana">banana</option>
<option value="lemon">lemon</option>
</select>
你选中了 -- {{ checkFruit }}
<br><br>
多选的下拉框：
<select multiple v-model="checkFruits"> // 实现多选，应该写上 multiple 属性
<option value="apple">apple</option>
<option value="peach">peach</option>
<option value="banana">banana</option>
<option value="lemon">lemon</option>
</select>
</div>
var app = new Vue({
el: '#app',
data: {
checkFruit: 'peach', // 单选下拉框绑定的值，可以是字符串，也可以是数组，这里也可以写成 checkFruit: ['peach']
checkFruits: ['peach'] // 多选下拉框绑定的值，应该是数组
}
})
- 第一个单选下拉框：每次只能选中一个，后面的文本会随之改变；
- 第二个多选下拉框：按住 Ctrl 键，可以多选，后面的数组会随之改变。
如果是单选：初始化最好给定字符串，因为 v-model 此时绑定的是静态字符串或者布尔值；
如果是多选：初始化最好给定一个数组。
