v-bind v-model怎么在Vue.js中使用

tangjin

作者

本篇文章给大家分享的是有关v-bind v-model怎么在Vue.js中使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

v-model指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据

v-bind v-model怎么在Vue.js中使用

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

<body>
<divclass="app">
<span>Multilinemessageis:</span>
<p>{{message}}</p>
<br>
<textareaname=""v-model="message"placeholder="pleasewrite..."></textarea>
</div>

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

checkbox

<body>
<divclass="app">
<inputtype="checkbox"id="jack"value="jack"v-model="checkedNames">
<labelfor="jack">jack</label>
<inputtype="checkbox"id="John"value="John"v-model="checkedNames">
<labelfor="jack">John</label>
<inputtype="checkbox"id="Mike"value="Mike"v-model="checkedNames">
<labelfor="jack">Mike</label>
<br>
<span>Checkednames:{{checkedNames}}</span>
</div>

</body>
<script>
newVue({
el:'.app',
data:{
checkedNames:[]
}
})
</script>

v-bind

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

以上就是v-bind v-model怎么在Vue.js中使用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-03-26 01:50:18

vue