v-model双向数据绑定的修饰符
.lazy:失去焦点时数据进行双向的绑定 v-model.lazy=”message ”
.number:前面输入数字,后面接着字母自动去除掉。v-model. number =”message ”
.trim:去掉打头的空格,内容之间还是可以产生空格。
v-model表单按钮方面的双向绑定
html
<div id="app">
<h2>最简单的双向数据绑定</h2>
<p v-text="message1"></p>
<input type="text" v-model="message1"/>
<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>
<h3>多选绑定一个数组</h3>
<p>
<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
<label for="JSPang">JSPang</label><br/>
<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
<label for="JSPang">Panda</label><br/>
<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
<label for="JSPang">PanPan</label>
<p>{{web_Names}}</p>
</p>
<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
</div>
js
var vm = new Vue({
el:"#app",
data:{
message1:123,
isTrue:true,
web_Names:[],
sex:"男"
}
})