1、v-model的使用场景
1、v-model的使用,用于表单控件的数据绑定
2、v-model与value共同使用,实现选项框的选中事件,两者相同时,选中
3、v-model 与v-bind:value(:value)共同使用,实现数据的绑定:如单选框选中时,picked=value里的值
<div id="app" >
<!-- v-model数据绑定 -->
<input type="text" v-model="message" placeholder="输入。。。"/>
<p>输入的内容是:{{message}}</p>
<textarea v-model="message" placeholder="输入。。"></textarea>
<!-- 单选框,使用v-model和value实现互斥,相等时选中 -->
<input type="radio" v-model="picked" value="html" id="html"/>
<label for=html >HTML</label>
<input type="radio" v-model="picked" value="js" id="js"/>
<label for=js >js</label>
<input type="radio" v-model="picked" value="css" id="css"/>
<label for=css >css</label>
<!-- 多选框,checked,值是false和true根据选中与否,实现切换 -->
<input type="checkbox" v-model="checked" id="checked"/>
<label for=checked >选择状态{{checked}}</label>
<!-- 多选框,使用v-model和value实现多选,相等时选中 checked2为数组-->
<input type="checkbox" v-model="checked2" value="html" id="html"/>
<label for=html >HTML</label>
<input type="checkbox" v-model="checked2" value="js" id="js"/>
<label for=js >js</label>
<input type="checkbox" v-model="checked2" value="css" id="css"/>
<label for=css >css</label>
<!-- options multiple没有:单选,selected是一个字符串,多选,selected是一个数组-->
<select v-model="selected" multiple>
<option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>
<!-- 绑定值 -->
<input type="radio" v-model="picked" :value="value"/>
<label>单选按钮</label>
<p>{{picked}}</p>
<p>{{value}}</p>
<input type="radio" v-model="picked" :value="value"/>
<label>单选按钮</label>
<p>{{picked}}</p>
<p>{{value}}</p>
</div> </body> </html> <script> var app = new Vue({ el:"#app", data:{ message:"33", picked:"js", value:"123", checked:false, checked2:["html","js"], selected:["html","js"], options:[ { text:"HTML", value:"html" }, { text:"JS", value:"js" }, { text:"CSS", value:"css" } ] } }); </script>
2、v-model的修饰符
.lazy
.number
.trim
<!--在失去焦点和回车时才会更新message数据-->
<input type="text" v-model.lazy="message"/>
<!--输入的数据转换成number的类型-->
<input type="number" v-model.number="message"/>
<!--自动过滤输入的首尾空格-->
<input type="text" v-model.trim="message"/>