vue.js数据绑定操作详解

2020-06-16 06:19:15易采站长站整理


<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>