表单绑定 v-model
概述
-
使用
v-model
指令在 , 以及 元素上面创建数据的双向绑定-
什么是
双向绑定
?就是我们从DOM元素界面修改值也能影响到 Vue 实例里面的数据,类似这样
-
以前我们只能修改 Vue 实例里面的数据来让DOM进行响应式,
不能
通过改变DOM
的数据让Vue的数据改变 -
这样写也是不能发生双向绑定
<div id="app"> <input type="text" :value="message"> <h3>{{message}}</h3> </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
下面,通过双向绑定,使我们在input表单上直接修改值能影响到 Vue 实例里的数据,从而发生响应式
双向绑定的原理(宏观层面)
-
给一个input表单进行
input
事件监听 -
表单的 vales 值发生变化时,触发事件,改变Vue实例里的数据,发生响应式
v-model的本质
,本质就是下面这坨代码实现双向绑定的语法糖<!-- 1. 普通写法 --> <div id="app"> <input type="text" :value="message" @input="changeValue"> <h3>{{message}}</h3> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { changeValue(e) { // 当输入值发生变化,触发事件 this.message = e.target.value } } }) </script> <!-- 2. 语法糖写法 --> <input type="text" :value="message" @input="message = $event.target.value"> <!-- 上面这段代码的本质就是 --> <input type="text" v-model="message">
-
核心
v-model
在内部为不同的输入元素使用不同的属性并抛出不同的事件:
- text 和 textarea 元素使用
value
属性和input
事件; - checkbox 和 radio 使用
checked
属性和change
事件; - select 字段将
value
作为 prop 并将change
作为事件
使用
-
radio
<!-- 最普通写法 --> <label for="male"> <input type="radio" name="sex" value='男' id="male" v-model="sex">男 </label> <label for="female"> <input type="radio" name="sex" value='女' id="female" v-model="sex">女 </label> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', sex: '', } }) </script> <!-- v-model 可以让我们单选框的name值发生互斥,所以不用写name值 --> <div id="app"> <label for="male"> <input type="radio" value='男' id="male" v-model="sex">男 </label> <label for="female"> <input type="radio" value='女' id="female" v-model="sex">女 </label> <h2>sex的值:{{sex}}</h2> </div> <script src="VueJs/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', sex: '男', // 这里默认写 男,会相应到DOM里面,value为男的会默认选中 } }) </script>
-
checkbox
单选框的时候
<div id="app"> <input type="checkbox" id="agree" v-model="isAgree"> <label for="agree">同意</label> <h3>当前选择的是:{{isAgree}}</h3> <button :disabled="!isAgree">下一步</button> </div> <script src="VueJs/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', isAgree: false } }) </script>
多选框的时候
<div id="app"> <input type="checkbox" value="看书" v-model="hobbies">看书 <input type="checkbox" value="游泳" v-model="hobbies">游泳 <input type="checkbox" value="跑步" v-model="hobbies">跑步 <input type="checkbox" value="打游戏" v-model="hobbies">打游戏 <h3>选择的爱好有:{{hobbies}}</h3> </div> <script src="VueJs/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { hobbies: [] } }) </script>
-
select
选择一个
<div id="app"> <select name="fruit" id="" v-model="fruit"> <option value="杭州">杭州</option> <option value="金华">金华</option> <option value="萧山">萧山</option> <option value="苏州">苏州</option> <option value="上海">上海</option> </select> <h3>您当前选择的是:{{fruit}}</h3> </div> <script src="VueJs/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { fruit: '杭州' } }) </script>
选择多个
<div id="app"> <!-- 选择一个 --> <select name="fruit" v-model="fruit" multiple> <option value="杭州">杭州</option> <option value="金华">金华</option> <option value="萧山">萧山</option> <option value="苏州">苏州</option> <option value="上海">上海</option> </select> <h3>您当前选择的是:{{fruit}}</h3> </div> <script src="VueJs/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { fruit: [] } }) </script>
使用
v-for
来动态渲染<div id="app"> <select v-model='finallyData'> <option v-for="item in originalOpt" >{{item}}</option> </select> <h3>最终的数据是: {{finallyData}}</h3> </div> <script src="VueJs/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { originalOpt: ['杭州', '上海', '北京', '金华'], finallyData: '杭州', } })
值绑定
对于单选按钮,复选框及选择框的选项,v-model
绑定的值通常是被我们写死的,我们可以把值绑定到Vue实例的一个动态属性上
选项里面的数据不能写死,服务器会给我们可选的数据,我们需要动态渲染数据,就是
v-bind:value
动态渲染数据
<div id="app">
<label v-for="item in originOpt">
<input type="checkbox" name="bool" :value="item" v-model="picked">{{item}}
</label>
<h3>{{picked}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
picked: [],
originOpt: ['篮球', '足球', '乒乓球', '羽毛球']
}
})
</script>
修饰符
.lazy
以前把 input 输入框进行双向绑定的时候,只要是输入框发生了 input
事件, Vue 实例里面的 message 就会实时发生变化并进行数据的响应,我们可以添加 .lazy
修饰符来改变表单的监听事件,当我们失去焦点或者回车时候,才会发生双向绑定
如果不想实时发生双向绑定,可以给
v-model
添加lazy
修饰符:
<div id="app">
<input type="text" v-model.lazy="message">
<h3>{{message}}</h3>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
}
})
</script>
.number
我们用 input:number
这个表单时,用户虽然输入的数字,但是传到后台其实是 string字符换
如果想自动将用户的输入值转为数值类型,可以给
v-model
添加number
修饰符:
<div id="app">
<input type="number" v-model.number="message">
<h3>类型:{{ typeof message}} 值:{{message}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 1,
iptValue: null,
}
})
.trim
用户输入的如果是带空格的字符串。我们可以添加该修饰符来去除
如果要自动过滤用户输入的首尾空白字符,可以给
v-model
添加trim
修饰符:
<div id="app">
<p>去空格</p>
<input type="text" v-model.trim="message">
<h3>值:"{{message}}"</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
}
})