<input type="text" v-model="message" />
<span>Your input is : {{ message }} </span>2. Radio
单选框示例:
<label><input type="radio" value="male" v-model="gender">男</lable>
<label><input type="radio" value="famale" v-model="gender">女</lable>
<p>{{ gender }}</p> //显示的是value值3.Checkbox
单个勾选框,v-model即为布尔值,此时Input的value并不影响v-model的值。
<input type="checkbox" v-model="checked" />
<span>checked: {{ checked }} </span> //显示的是true/false
多个勾选框,v-model使用相同的属性名称,且属性为数组。
<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="1" v-model="multiChecked">2</label>
<label><input type="checkbox" value="1" v-model="multiChecked">3</label>
<p>MultiChecked:{{ multiChecked.join{'|'} }}</p> //multiChecked:1|2
4.Select
单选
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>多选
<select v-model="multiSelected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>MultiSelected: {{ multiSelected.join('|') }}</span>5.绑定value
通过v-bind实现,表单控件的值绑定到Vue市里的动态属性上。
Checkbox
<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b" />选中:
vm.checked == vm.a //=> true
未选中:
vm.checked == vm.b //=>true
Radio
<input type="radio" v-model="checked" v-bind:value="a" >选中:
vm.checked == vm.a //=> true
3.Select Options
<select v-model="selected">
<!-- 对象字面量 -->
<option v-bind:value="{ number:123}">123</option>










