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

2024-05-06 16:47:16

字体：大中小

来源：转载

供稿：网友

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

总结

以上所述是小编给大家介绍的Vue.js中v-bind v-model的使用和区别，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：Vue源码解析之数组变异的实现

下一篇：vue-better-scroll 的使用实例代码详解