博客

Vue v-bind v-model的使用

  • Post author:
  • Post category:vue



v-model

指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的

data与其渲染的dom元素上的内容保持一致

，两者无论谁被改变，另一方也会相应的更新为相同的数据

最基础的就是实现一个联动的效果 

<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>

checkbox 

<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-bind

有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性

转载于:https://www.cnblogs.com/hemude7788/p/5939092.html