v-model的基本使用
- 在input框中添加指令, v-model, 值为需要绑定的data数据
- 这样的话, 修改input框中的内容, data中的内容也会响应式改变
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好呀"
}
})
</script>
v-model的原理
- v-model其实是一个语法糖, 它的背后本质是包含两个操作
-
- v-bind绑定一个value属性
-
- v-on 指令给当前元素绑定input事件
-
<input type="text" v-model="message">
<!-- 等同于 -->
<input type="text" :value="message" @input="message = $event.target.value">
v-model结合radio的使用
- 在给input的radio设置v-model指令后, 不需要设置相同的name值就可以达到单选的效果
- 在使用v-model绑定radio单选按钮到data数据中的时候, 每次点击单选按钮都会将单选按钮是否选择传入data数据中, 已选传入true, 没选则传入false
<div id="app">
<label for="male">
<!-- 在给input的radio设置v-model指令后, 不需要设置相同的name值就可以达到单选的效果 -->
<input type="radio" id="male" v-model="sex" value="男">男
</label>
<label for="female">
<input type="radio" id="female" v-model="sex" value="女">女
</label>
<h2>{{sex}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
sex: ""
}
})
</script>
v-model结合checkbox使用
- 结合单选checkbox使用
- 与单选checkbox结合使用的时候, 一般给绑定的data数据声明为boolean值, 记录单选框是否有被选中
- 结合多选checkbox使用
- 与多选checkbox结合使用的时候, 一般给绑定的data数据声明为一个数组, 因为每次点击checkbox的时候,如果选中则会将其value值传入data数据, 如果没有选中, 则会将对应的data数据删除, 这样就可以记录用户选择了什么
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您的选择是: {{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<br>
<input type="checkbox" v-model="hobby" value="篮球">篮球
<input type="checkbox" v-model="hobby" value="乒乓球">乒乓球
<input type="checkbox" v-model="hobby" value="羽毛球">羽毛球
<input type="checkbox" v-model="hobby" value="网球">网球
<h2>您的爱好有: {{hobby}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
isAgree: false, //单选框绑定为boolean值
hobby: [] // 多选框绑定为一个数组
}
})
</script>
v-model的值绑定
- 实质上就是动态地给value赋值
- 在真实开发中, input的值是从服务器中获取或者定义在data中的
- 所以要通过v-bind:value动态地给value绑定值
<div id="app">
<!-- v-model的值绑定概念 -->
<!-- 遍历请求来的数据创建input -->
<label v-for="item in orginHobby" :for="item">
<!-- 通过v-model将input绑定在用于记录用户选择的数据中 -->
<input type="checkbox" :id="item" :value="item" v-model="hobby">{{item}}
</label>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
hobby: [], // 这里是用于记录用户选中的数据的
orginHobby: ["篮球", "乒乓球", "羽毛球", "网球", "高尔夫球", "台球"] // 这里可以看作是从服务器中请求来的需要渲染在页面上的数据
}
})
</script>
v-model结合select使用
- select单选
- v-model绑定的是一个值
- 当选中option中的一个时, 就会将它的value值传入绑定的data中
- select多选
- 用multiple属性将select转换为多选
- v-model绑定的是一个数组
- 当选中多个值的时候, 就会将选中的option传入绑定的data数组中
<div id="app">
<select name="frult" v-model="frult">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>你选择的水果是: {{frult}}</h2>
<!-- select设置为多选 用multiple属性 -->
<select name="frults" v-model="frults" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>你选择的水果有: {{frults}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
frult: "苹果", // 如果是单选的select 就设置为一个字符串就好了
frults: [] // 如果是多选的select 就设置为一个数组
}
})
</script>
v-model的修饰符
-
lazy修饰符
- 默认情况下, v-model默认是在input事件中同步输入框的数据的
- 也就是说数据一旦发生变化, data中的数据就会立即变化, 这样会降低性能
- 在v-model指令加上lazy修饰符, 就可以让data数据在input框失去焦点或者用户敲下回车的时候才会更新
-
number修饰符
- 默认情况下,在输入框中无论用户输入的是字符串还是数字, 存储在data中的时候都会被Vue转换为字符串类型
- 如果想要处理的是数字类型, 那么最好将内容存储为数字类型
- number修饰符可以将传入的内容转成数字类型
-
trim修饰符
- 如果输入的内容首尾有空格, 我们希望去除的话
- trim修饰符可以过滤内容左右两边的空格
<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>
const app = new Vue({
el: "#app",
data: {
message: "",
age: 0,
name: ""
}
})
</script>