首页 > 其他 > 详细

v-model双向数据绑定

时间:2017-06-04 11:12:40      阅读:622      评论:0      收藏:0      [点我收藏+]
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:"男"
            }
        })

 

v-model双向数据绑定

原文:http://www.cnblogs.com/model-zachary/p/6939792.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!