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>
相關文章
相關標籤/搜索