输入框 文本域
<div id="app"> <input type="text" v-model="message"> <p>输入的内容是:{{message}}</p> </div> <script> var app=new Vue({ el: 'app', data:{ message:'' } }) </script>
注意:文本域也一样,不过使用v-model后,value值不起作用,<textarea></textarea>之间的值也不会生效。
测试一下@input代替v-model
<div id="app"> <input type="text" @input="handleInput"> <p>input message:{{message}}</p> </div> <script> var app=new Vue({ data: {message:''}, methods:{ handleInput:function(e){ this.message=e.target.value; } } }) </script>
这个在汉字输入时触发更新有不同。
单选按钮
单独使用,不需要v-model,直接用v-bind
<input type="radio" :checked="picked">
组合使用实现互斥
<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"> <p>selected item:{{picked}}</p> <script> data:{ picked:'js' }
复选框
<!--单个--> <div id="app"> <input type="checkbox" v-model="checked" id="checked"> </div> <script> data:{ checked:false} </script> <!--多个--> <div id="app"> <input type="checkbox" v-model="checked" value="html" id="html"> <input type="checkbox" v-model="checked" value="js"> <p>selected item:{{checked}}</p> </div> <script> data:{ checked:['html','js']} </script>
选择列表
<!--单选--> <div id="app"> <select v-model="selected"> <option>html</option> <option value="js">javascript</option> </select> <p>selected item:{{selected}}</p> </div> <script> data:{selected:'html'} </script> <!--多选--> <select v-model="selected" multiple> data:{selected:['html','js'] <!--实际业务--> <select v-model="selected"> <option v-for="option in options" :value="option.value">{{option.text}}</option> </select> data:{ selected:'html', options:[ { text:'Html', value:'html' }, {...} ] }
注意:实际业务中,select的样式依赖平台和浏览器,无法统一,不美观,功能受限,常见的解决方案是用div模拟。
动态绑定值
单选
<input type="radio" v-model="picked" :value="value"> data:{ picked:false, value:123 }
复选
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2"> data:{ toggle:false, value1:'a', value2:'b' }
选择列表
<select v-model="selected"> <option :value="{number:123}">123</option> </select> data:{selected:''}
修饰符
.lazy change事件中同步
<input type="text" v-model.lazy="message">
.number 将输入转换为number类型
<input type="number" v-model.number="message"> data:{message:123}
.trim