表单控件绑定

v-model 指令在表单控件元素上创建双向数据绑定。

 1         <!-- 文本 -->
 2         <p>Message is:{{message}}</p>
 3         <input v-model="message" placeholder="edit me">
 4         <!-- 多行文本 -->
 5         <p>{{message1}}</p>
 6         <textarea v-model="message1" placeholder="add multiple lines">    </textarea><br>
 7         <!-- 复选框 -->
 8         <label for="checkbox">{{checked}}</label>
 9         <input type="checkbox" id="checkbox" v-model="checked"><br>
10         <!-- 多个勾选框 -->
11         <input type="checkbox" id="A" value="A" v-model="checkedNames">
12         <label for="A">A</label>
13         <input type="checkbox" id="B" value="B" v-model="checkedNames">
14         <label for="B">B</label>
15         <input type="checkbox" id="C" value="C" v-model="checkedNames">
16         <label for="C">C</label>
17         <p>Checked :{{checkedNames}}</p>
18         <!-- 单选按钮 -->
19         <input type="radio" id="one" value="one" v-model="picked">
20         <label for="one">one</label><br>
21         <input type="radio" id="two" value="two" v-model="picked">
22         <label for="two">two</label>
23         <p>Picked: {{picked}}</p>
24         <!-- 选择列表 -->
25         <select v-model="selected">
26             <option value="" disabled="">choose</option>
27             <option >A</option>
28             <option >B</option>
29             <option >C</option>
30         </select>
31         <p>Selected: {{selected}}</p>
32         <!-- 多选列表 -->
33         <select v-model="selectedMul" multiple style="width:50px">
34             <option>A</option>
35             <option>B</option>
36             <option>C</option>
37         </select>
38         <p>Selected: {{selectedMul}}</p>
39         <!-- 动态选线 v-for -->
40         <select v-model="selectedFor">
41             <option v-for="option in options" v-bind:value="option.value">
42                 {{option.text}}
43             </option>
44         </select>
45         <p>Selected v-for: {{selectedFor}}</p>
data:{
                    message:"single line",
                    message1:"multiple lines",
                    checked:true,
                    checkedNames:[],
                    picked:'',
                    selected:'',
                    selectedMul:[],
                    selectedFor:'A',
                    options:[
                        {text:'One',value:'A'},
                        {text:'Two',value:'B'},
                        {text:'Three',value:'C'},
                    ]

修饰符

.lazy 修饰符，将同步的v-model 转为change 事件中同步

<input v-model.lazy="msg">

.number 自动将用户的输入值转为Number 类型

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

posted @ 2017-08-14 11:25  会爬树的猪日月  阅读(98)  评论(0)    收藏  举报