v-model指令用来在input,select,text,checkbox,radio等表单控件元素上创建双向数据绑定,本质是监听input事件改变data并绑定value属性为data.
text
设置文本框v-model为message;
<label for="input-msg">input here: </label>
<input v-model="message" type="text" name="msg" id="input-msg">
<h2>{{message}}</h2>
------------------------------------------------------------------
data:{
message:"",
},
双向绑效果
改变vue实例中message的值后,
input的值和h2的值也发生了变化:
改变message的值
但是改变
input的value属性并不能响应式的改变message和<h2>的innerText属性;改变<h2>的innerHTML和innerText属性效果相同.原因是在控制台中改变以上属性并不能触发input事件因此无法修改message.
修改value
实现原理:v-bind和事件input的监听的组合
<body>
<div id="app">
<label for="input-msg">input here: </label>
<input :value="message" type="text" name="msg" id="input-msg" @input="valChange">
<h2>{{message}}</h2>
</div>
</body>
<script>
const vm = new Vue({
el:"#app",
data:{
message:"",
},
methods:{
valChange(e){
this.message = e.target.value;
}
}
})
</script>
raido
<label for="male">男生: <input type="radio" name="sex" id="male" value="male" v-model="sex"></label>
<label for="famale">女生: <input type="radio" name="sex" id="famale" value="famle" v-model="sex"></label>
<h2>{{sex}}</h2>
<!-- 用name来让两个radio互斥(加入v-model后可省略) -->
radio
checkbox
1. 单选
单选绑定的值只有两个值:true和false
<label for="like">I like pizza<input v-model="isLike" type="checkbox" name="like" id="like"></label>
<h2>{{isLike}}</h2>
--------------------------------------
data: {
isLike:false
},
单选
2. 多选
<input type="checkbox" name="" id="" v-model="isFruit" value="apple">苹果
<input type="checkbox" name="" id="" v-model="isFruit" value="banana">香蕉
<input type="checkbox" name="" id="" v-model="isFruit" value="orange">橘子
<input type="checkbox" name="" id="" v-model="isFruit" value="potato">土豆
<input type="checkbox" name="" id="" v-model="isFruit" value="bike">自行车
<h2>以上为水果的是:{{isFruit}}</h2>
--------------------------------
data: {
isFruit:[] //数组
},
多选时将数据定义为数组,选中时会将input的value添加到数组中.
多选
select
<select name="frult" v-model="isFruit">
<option name="" id="" value="apple">苹果
<option name="" id="" value="banana">香蕉
<option name="" id="" value="orange">橘子
<option name="" id="" value="potato">土豆
<option name="" id="" value="bike">自行车
</select>
-------------------------------------------
data: {
isFruit:''
},
值绑定
值绑定可以将数组绑定input的value属性,从而利用v-for指令遍历数组来生成input:
<select name="frult" v-model="choose">
<option v-for="item in frults" :id="item" :value="item">{{item}}
</select>
<h2>你选择的是:{{choose}}</h2>
---------------------------------------
data: {
choose:'',
frults:['apple','orange','banana']
},
网友评论