Vue v-bind v-model的使用

時間 2019-11-21

標籤 vue bind model 使用简体版

原文原文鏈接

v-model 指令在表單控件元素上建立雙向數據綁定,所謂雙向綁定，指的就是咱們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，二者不管誰被改變，另外一方也會相應的更新爲相同的數據vue

最基礎的就是實現一個聯動的效果app

<body>
    <div class="app">
        <span>Multiline message is:</span>
        <p>{{message}}</p>
        <br>
        <textarea name="" v-model="message" placeholder="please write..."></textarea>
    </div>

</body>
<script>
   new Vue({
         el:'.app'
   })
</script>

checkboxdom

<body>
    <div class="app">
        <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
        <label for="jack">jack</label>
        <input type="checkbox" id="John" value="John"  v-model="checkedNames">
        <label for="jack">John</label>
        <input type="checkbox" id="Mike" value="Mike"  v-model="checkedNames">
        <label for="jack">Mike</label>
        <br>
        <span>Checked names:{{checkedNames}}</span>
    </div>
    
</body>
<script>
   new Vue({
         el:'.app',
         data:{
             checkedNames:[]
         }
   })
</script>

v-bindspa

有些指令能夠在其名稱後面帶一個「參數」 (Argument)，中間放一個冒號隔開。例如，v-bind 指令用於響應地更新 HTML 特性雙向綁定

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。