码迷,mamicode.com
首页 > 其他好文 > 详细

vue基础八

时间:2017-01-12 18:52:18      阅读:24      评论:0      收藏:0      [点我收藏+]

标签:put   mod   div   strong   双向数据绑定   按钮   sel   for   line   

表单控件绑定

1.基础用法

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。

1.1文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
1.2复选框
单个勾选框,逻辑值:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
1.3单选按钮
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
1.4选择列表
单选列表:
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
多选列表(绑定到一个数组):
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
 

vue基础八

标签:put   mod   div   strong   双向数据绑定   按钮   sel   for   line   

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!