v-model 表单元素input 和应用效果的双向绑定

最新推荐文章于 2024-01-24 14:23:16 发布

灵灵7

最新推荐文章于 2024-01-24 14:23:16 发布

阅读量886

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_41796631/article/details/82818279

vue 专栏收录该内容

68 篇文章

订阅专栏

本文详细介绍了如何在Vue中实现双向数据绑定，通过一个具体的示例展示了input输入框与message属性之间的实时同步更新过程，使读者能够快速掌握Vue的数据绑定机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<p id="inpChange"> {{message}} 
<input v-model="message">
</p>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

var t = new Vue({
  el:'#inpChange',
data:{
message:"双向绑定输入框和最后显示效果"
}

})

</script>

<input v-model="message" >, 绑定 input 元素和message 的值。

双向绑定：

1. input 输入框初始值等于message 的初始值

2. 修改input 输入框的值，message 的值也会随之改变