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>

　　

转载于:https://www.cnblogs.com/hnzheng/p/9139256.html