Vue.js中v-bind v-model的使用和区别

最新推荐文章于 2025-10-20 18:16:11 发布

原创最新推荐文章于 2025-10-20 18:16:11 发布 · 1.5w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #v-bind #v-model

vueJs 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了Vue.js中的v-bind和v-model指令，重点讲解它们在实现双向数据绑定中的作用。v-model常用于表单元素的实时同步，而v-bind则用于动态绑定HTML属性。通过这两个指令，可以确保JavaScript中的数据与DOM元素内容保持一致，实现数据的即时更新。

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>