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

来源：动视网责编：小采时间：2020-11-27 22:02:57

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

浅析Vue.js中v-bind v-model的使用和区别:v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据最基础的就是实现一个联动的效果 <body> &l

推荐度：

点击下载本文 文档为doc格式

导读浅析Vue.js中v-bind v-model的使用和区别:v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据最基础的就是实现一个联动的效果 <body> &l

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的使用和区别，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！