v-model 双向数据绑定以及修饰符

    <!--v-model  实现双向数据绑定  其中一个值发生改变,另一个值也将实时发生改变-->
    <div id="app09">
        <h1>{{ message }}</h1>
        <input v-model="message" />
    </div>

调用:
    Study_V_Model("#app09");


实现
function Study_V_Model(obj) {
    new Vue({
        el: obj,
        data: {
            message:''
        }
    })
}

  

 

 

  
    <!--number修饰符    限制只能输入 数字-->
     {{ typeof(value) }}{{ value }}<input v-model.number="value">
      <!--lazy 懒加载   文本框的内容输完才会更新值,不会实时的更新-->
     {{ typeof(value) }}{{ value }}<input v-model.lazy="value">
     <!--trim  去掉首位的空格-->
     {{ typeof(value) }}{{ value }}<input v-model.trim="value">
     <span>
    </div>  

    
    <script>
       new Vue({
         el:"#app01",
        data:{
           message:'aaa',
           isActive: true,
           color:'red',
           value:1
           
        }
             
       })
        
    </script>

  

posted @ 2018-06-05 13:13  谁说程序猿很猥琐  阅读(174)  评论(0编辑  收藏  举报