Vue中v-model的使用

基本用法和绑定值

v-model完成表单数据的双向绑定（表单控件：单选、多选、下拉选择、输入框）

            <div id="app">
             <!-- 对于输入表单 -->
             <input type="text" v-model="name" placeholder="请输入...">
             <h1>hello {{name}}</h1>
             <br />
             <!-- 对于文本域 -->
             <textarea v-model="text" placeholder="输入文本.."></textarea>
             <p>{{text}}</p>
             <br/>
             <!-- 输入实时更新用@input -->
             <textarea @input="handleInput" placeholder="输入.."></textarea>
             <p>{{text2}}</p>
             <br/>
             <!-- 单选按钮 :单独使用时不需要v-model,v-bind绑定一个布尔类型的值即可-->
             <input type="radio" :checked="picked">
             <label>单选按钮</label>
             <br>
             <!-- 组合使用实现互斥选择效果：使用v-model配合value使用 -->
             <!-- 数据picked2的值与单选按钮的value值一致时，就会选中该项，所以当选选中的是JavaScript -->
             <input type="radio" v-model="picked2" value="html" id="html">
             <label for="html"> HTML</label>
             <br>
             <input type="radio" v-model="picked2" value="js" id='js'>
             <label for="js">JavaScript</label>
             <br>
             <input type="radio" v-model="picked2" value="css" id='css'>
             <label for="css">CSS</label>
             <br>
             <!-- 复选框使用v-model -->
             <!-- 但单独使用时，勾选时checked的值变为true，lable中渲染的内容也会更新 -->
             <input type="checkbox" v-model="checked" id='checked' />
             <label for="checked">选择状态：{{checked}}</label>
             <br />
             <!-- 组合使用时，v-model和value一起，多个勾选框都绑定到同一数组类型的数据 -->
             <!-- 初始情况下，value的值在数组中就会选中该项，其它勾选时，value的值会自动push到这个数组中 -->
             <input type="checkbox" v-model="checked2" value='html' id='html2' />
             <label for="html2">HTML</label>
             <br />
             <input type="checkbox" v-model="checked2" value='js' id='js2' />
             <label for="js2">JavaScript</label>
             <br />
             <input type="checkbox" v-model="checked2" value='css' id='css2' />
             <label for="css2">CSS</label>
             <br />
             <p>选择的选项是：{{checked2}}</p>
             
             <!-- 选择列表（下拉选择器）-->
             <!-- 单选形式：如果selected里包含value的值会优先匹配，没有就直接匹配<option>的text -->
             <select v-model="selected">
                 <option>html</option>
                 <option value="js">JavaScript</option>
                 <option>css</option>
             </select>
             <p>选择的项：{{selected}}</p>
             <br />
             <!-- 多选形式 -->
             <select v-model="selected2" multiple="true">
                    <option>html</option>
                    <option value="js">JavaScript</option>
                    <option>css</option>
             </select>
             <p>选择的项：{{selected2}}</p>
             
             <!-- 绑定值 ：v-model绑定的值是一个静态字符串或布尔值，有时需要绑定一个动态数据可以用v-bind实现-->
             <!-- 单选按钮：选择时 app.picked3===app.value为123 -->
             <input type="radio" v-model="picked3" :value="value" />
             <label>tt单选按钮</label>
             <p>{{picked3}}</p>
             <p>{{value}}</p>
             <!-- 复选框 -->
             <!-- 勾选时app.taggle===app.value1,未勾选时，app.toggle===app.value2 -->
             <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2" />
             <label>tt复选框</label>
             <p>{{toggle}}</p>
             <p>{{value1}}</p>
             <p>{{value2}}</p>
             <!-- 选择列表 -->
             <!-- 当选中时，app.select是一个对象，所以app.select.number===123 -->
             <select v-model="select">
                 <option :value="{number:123}">123</option>
             </select>
             {{select}}
             {{select.number}}
             
         </div>
         <script>
             Vue.config.productionTip = false //阻止vue在启动时生成生产提示
             var app = new Vue({
                 el:'#app',
                 data:{  
                     name:'',
                     text:'',
                     text2:'',
                     picked:true,
                     picked2:'js',
                     checked:false,
                     checked2:['html'],
                     selected:'html',
                     selected2:['html','js'],
                     picked3:false,
                     value:123,
                     toggle:false,
                     value1:'a',
                     value2:'b',
                     select:''
                 },
                 methods:{
                     handleInput:function(e){
                         this.text2=e.target.value;
                     }
                 }
            
             })
         </script>

修饰符

• .lazy:在输入框中，v-model默认是在input事件中同步输入框中的数据，使用.lazy修饰符会转变为在change事件中同步

• .number：可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型是String

• .trim:自动过滤输入的首位空格

<!-- .lazy :输入可以发现message不是实时改变的，而是在失焦或按回车时才更新-->
<input type="text" v-model.lazy="message"/>
<p>.lazy修饰的{{message}}</p>
<br />
<!-- .number -->
<input type="number" v-model.number="message2" />
<p>输入的值为：{{message2}},输入的类型为：{{typeof message2}}</p>
<!-- .trim -->
<input type="text" v-model.trim="message3"/>
<p>输入了：{{message3}}</p>