# 1 v-model
v-model 只能用在：<input> <select> <textarea> <components>
v-model 本质上是一个语法糖。如下代码 <input v-model="message"> 本质上是 <input :value="message" @input="message= $event.target.value"> ，其中 @input 是对 <input> 输入事件的一个监听:value="message" 是将监听事件中的数据放入到 input，下面代码是 v-model 的一个简单的例子。在这边需要强调一点，v-model 不仅可以给 input 赋值还可以获取 input 中的数据，而且数据的获取是实时的，因为语法糖中是用 @input 对输入框进行监听的
<input type="text" v-bind:value="message" v-on:input="message =$event.target.value"> | |
<h1></h1> |
# v-model 原理
1.v-bind 绑定一个 value 属性
2.v-on 指令给当前元素绑定 input 事件
# 2 v-model Radio
<label for="man"> | |
<input type="radio" id="man" name="sex" value="男">男 | |
</label> | |
<label for="woman"> | |
<input type="radio" id="woman" name="sex" value="女">女 | |
</label> | |
<H2>您选择的性别是：</H2 |
<label for="man"> | |
<input type="radio" id="man" value="男" v-model="sex">男 | |
</label> | |
<label for="woman"> | |
<input type="radio" id="woman" value="女" v-model="sex">女 | |
</label> | |
<H2>您选择的性别是：</H2> |
加上 v-model = sex 后，可以不用加 name 属性，也可以达到按钮互斥效果。效果图：
<template> | |
<div id="app"> | |
<!-- 单选按钮 --> | |
<label for="man"> | |
<input type="radio" id="man" value="男" v-model="sex">男 | |
</label> | |
<label for="woman"> | |
<input type="radio" id="woman" value="女" v-model="sex">女 | |
</label> | |
<H2>您选择的性别是：</H2> | |
<!-- 单选框 --> | |
<label for="license"> | |
<input type="checkbox" id="licenseId" v-model="isAgree">同意协议 | |
</label> | |
<H2>您选择的性别是：</H2> | |
<!-- 多选框 --> | |
<input type="checkbox" value="读书" id="read" v-model="hobbies"> | |
<label for="read">读书</label> | |
<input type="checkbox" value="听音乐" id="music" v-model="hobbies"> | |
<label for="music">听音乐</label> | |
<input type="checkbox" value="跑步" id="run" v-model="hobbies"> | |
<label for="run">跑步</label> | |
<H2>您选择的爱好是：</H2> | |
</div> | |
</template> | |
<script> | |
import HelloWorld from './components/HelloWorld.vue' | |
export default { | |
name: 'app', | |
components: { | |
HelloWorld | |
}, | |
data() { | |
return { | |
message: 'v-model演示', | |
sex: '男', | |
isAgree: false, | |
hobbies:[] | |
} | |
}, | |
methods: {} | |
} | |
</script> | |
<style> | |
</style> |
# 2 修饰符
- lazy 修饰符
默认情况下，v-model 默认是在 input 事件中同步输入框的数据，即一旦有数据发生改变对应的 data 中的数据就会自动发生改变
lazy 修饰符可以让数据失去焦点或者回车时才会更新
number 修饰符
默认情况下，在输入框中无论输入的是字母还是数字，都会被当做字符串类型处理，number 修饰符可以让在输入框中输入的内容自动转成数字类型
trim 修饰符
trim 修饰符可以过滤内容左右两边的空格
看看
