首页 > 代码库 > v-model双向数据绑定

v-model双向数据绑定

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="http://www.mamicode.com/JSPang" v-model="web_Names">              <label for="JSPang">JSPang</label><br/>              <input type="checkbox" id="Panda" value="http://www.mamicode.com/Panda" v-model="web_Names">              <label for="JSPang">Panda</label><br/>              <input type="checkbox" id="PanPan" value="http://www.mamicode.com/PanPan" v-model="web_Names">              <label for="JSPang">PanPan</label>              <p>{{web_Names}}</p>        </p>            <h3>单选按钮绑定</h3>                <input type="radio" id="one" value="http://www.mamicode.com/男" v-model="sex">                <label for="one">男</label>                <input type="radio" id="two" value="http://www.mamicode.com/女" 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:"男"            }        })

 

v-model双向数据绑定