vue 双向绑定

作者：恐怖眼神发布日期:2026-06-15 浏览:141

// Vue 双向绑定示例代码

// 引入 Vue 库
// <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

<!-- HTML 代码 -->
<div id="app">
  <!-- v-model 指令实现双向绑定 -->
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>

解释说明：

Vue 实例：通过 new Vue() 创建一个 Vue 实例，并将其挂载到 HTML 中的 #app 元素上。
data 属性：data 对象中定义了一个名为 message 的属性，初始值为 'Hello Vue!'。
v-model 指令：在 <input> 元素上使用 v-model 指令，实现了输入框和 message 数据之间的双向绑定。当用户在输入框中输入内容时，message 的值会实时更新；反之，当 message 的值发生变化时，输入框的内容也会自动更新。
插值表达式：{{ message }} 是 Vue 的插值表达式，用于将 message 的值显示在页面上。

这样，用户在输入框中输入的内容会实时反映在页面上的文本中，实现了双向绑定的效果。

上一篇：vue 数组包含某个值

下一篇：vue object.assign