当前位置：首页 > article >正文

Vue.js 数据绑定：插值、双向绑定、计算属性

article 2025/1/11 6:06:41

Vue.js 数据绑定：插值、双向绑定、计算属性

今天我们来聊聊 Vue.js 中最基础但超级重要的功能之一——数据绑定。

当我们说“数据绑定”的时候，其实是在说 Vue 提供了一套让“数据”和“视图”保持同步的机制。只需要更新数据，页面就会自动更新，完全不需要手动操作 DOM。是不是听起来就很省心？

Vue.js 的数据绑定有几个核心方式：插值、双向绑定、和计算属性。接下来我就带你快速了解一下它们是怎么用的。

一、插值表达式：数据到页面的桥梁

插值是 Vue 最基础的绑定方式，用来把 JavaScript 数据绑定到 HTML 模板中。

常见的就是在模板里用 {{ }} 包裹数据表达式，像这样：

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '你好，Vue!'
  }
});
</script>

上面的例子里，{{ message }} 就是插值表达式，它会把 message 的值渲染到页面中。结果是：

<p>你好，Vue!</p>

简单吧！但不仅仅是显示字符串，插值表达式还支持更复杂的操作，比如调用方法、运算、三元表达式等等：

<p>{{ message.toUpperCase() }}</p>
<p>{{ 5 + 3 }}</p>
<p>{{ isLoggedIn ? '欢迎回来！' : '请登录' }}</p>

插值表达式适合单向绑定，也就是数据只能从 JavaScript 流向页面，但不能反过来。

二、双向绑定：数据和页面的双向沟通

如果你希望页面的内容也能反过来更新数据，那就需要用到双向绑定了。Vue 提供了一个指令——v-model，用来实现数据和视图的双向绑定。

双向绑定最常见的场景是表单，比如输入框：

<div id="app">
  <input v-model="name" placeholder="请输入你的名字">
  <p>你好，{{ name }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    name: ''
  }
});
</script>

在这里，v-model="name" 绑定了输入框的值和数据 name。当用户在输入框中输入时，name 的值会自动更新，同时页面上的 {{ name }} 也会实时显示最新的内容。

有了双向绑定，页面和数据之间的沟通就像搭建了一座桥，无论哪一边改变，另一边都会跟着变！

三、计算属性：动态更新的聪明助手

在一些复杂场景下，我们需要根据多个数据的组合来动态计算某些值。虽然可以直接用插值表达式，但表达式如果太复杂，模板会变得难以维护。

Vue 为我们提供了计算属性（computed properties），让代码更清晰、更易读。

来看个例子：

<div id="app">
  <p>原价：{{ price }}</p>
  <p>折扣价：{{ discountedPrice }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    price: 100,
    discount: 0.8
  },
  computed: {
    discountedPrice() {
      return this.price * this.discount;
    }
  }
});
</script>