** 双向数据绑定的几个修饰符**
- v-model.lazy 当焦点离开输入框时才进行渲染
- v-mmodel.number 输入框里边必须是数字,否则会清空。当先输入字符串后输入数字,就无法将字符串省略掉
- v-model.trim 清空空格
<p>原始数据:{{message}}</p>
<h3>文本框</h3>
<input type="text" v-model="message"><br>
<input type="text" v-model.lazy="message"><br>
<input type="text" v-model.number="message"><br>
<input type="text" v-model.trim="message"><br>
<hr>
<h3>文本域</h3>
<textarea v-model="message"></textarea>
<hr>
<h3>多选框</h3>
<input type="checkbox" id="checkbox" v-model="isTrue">
<label for="checkbox">{{isTrue}}</label>
<hr>
<h3>多选框绑定一个数组</h3>
<p>
<input type="checkbox" id="zhang" value="zhangsan" v-model="names">
<label for="zhang">zhangsan</label>
<input type="checkbox" id="li" value="lisi" v-model="names">
<label for="zhang">lisi</label>
<input type="checkbox" id="wang" value="wangwu" v-model="names">
<label for="zhang">wangwu</label>
</p>
<p>{{names}}</p>
<hr>
<h3>单选按钮的双向数据绑定</h3>
<p>
<input type="radio" id="man" value="男" v-model="sex">
<label for="man">男</label>
<input type="radio" id="woman" value="女" v-model="sex">
<label for="woman">女</label>
<p>你选择的性别是:{{sex}}</p>
</p>
var a = new Vue({
el : "#app",
data : {
message : "hello world",
isTrue : false,
names : [],
sex : "男"
}
})
单选下拉菜单
<div id="app6">
<select v-model="selected">
<option disabled>please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>selected : {{ selected }}</span>
</div>
var app6 = new Vue({
el : "#app6",
data : {
selected : ' '
}
});
多选下拉菜单
<div id="app7">
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>selected : {{ selected }}</span>
</div>
selected : []
绑定下拉菜单,且名称与之对应
<div id="app8">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<span> selected : {{ selected}}</span>
</div>
var app8 = new Vue({
el : '#app8',
data : {
selected : 'A',
options : [
{text : 'one', value : 'A'},
{text : 'two', value : 'B'},
{text : 'three', value : 'C'}
]
}
})
网友评论