9 基础语法之插值与表达式

在Vue中，插值与表达式是我们与数据交互的基本方式之一。理解插值与表达式的使用对于开发动态网页应用非常重要。本章将系统地介绍Vue中的插值和表达式的基本用法，并通过实际案例加深理解。

插值

插值主要用于在模板中显示数据。Vue支持两种主要的插值方式：文本插值和属性插值。文本插值使用花括号{{ }}，而属性插值则使用v-bind指令。

文本插值

文本插值是最简单的插值方式，它可以将组件的数据直接渲染到DOM中。例如：

<div id="app">
  <p>欢迎来到{{ name }}的世界！</p>
</div>

在上述代码中，如果我们在Vue实例中定义了name属性：

new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  }
});

渲染出来的结果将会是：

欢迎来到 Vue.js 的世界！

属性插值

有时候我们希望将数据绑定到某个HTML属性上，此时可以使用v-bind指令。例如，设置一个图片的src属性：

<div id="app">
  <img v-bind:src="imageSrc" alt="Example Image" />
</div>

在Vue实例中定义imageSrc：

new Vue({
  el: '#app',
  data: {
    imageSrc: 'https://example.com/image.png'
  }
});

这样一来，图片的src属性将与imageSrc动态绑定，确保当imageSrc的值变化时，图片也会自动更新。

表达式

除了简单的插值外，Vue的插值和属性绑定还可以包含表达式。表达式可以是简单的运算、逻辑判断等。

数学运算

假设我们有一个变量a和b，我们想显示它们的和：

<div id="app">
  <p>和是: {{ a + b }}</p>
</div>

在Vue实例中定义这些变量：

new Vue({
  el: '#app',
  data: {
    a: 5,
    b: 10
  }
});

输出将是：

和是: 15

条件表达式

我们还可以在插值中使用条件表达式，例如显示一个特定的消息：

<div id="app">
  <p>{{ isLoggedIn ? '欢迎回来!' : '请登录' }}</p>
</div>

在Vue实例中定义isLoggedIn：

new Vue({
  el: '#app',
  data: {
    isLoggedIn: true
  }
});

这段代码将会输出：

欢迎回来!

方法调用

插值中还可以调用方法，注意尽量避免在模板中执行复杂的计算，因为这会影响性能：

<div id="app">
  <p>随机数是: {{ getRandomNumber() }}</p>
</div>

在Vue实例中定义方法：

new Vue({
  el: '#app',
  data: {},
  methods: {
    getRandomNumber() {
      return Math.floor(Math.random() * 100);
    }
  }
});

这样，每次组件重新渲染时，都会生成一个新的随机数。

注意事项

• 插值中的表达式仅能用简单运算，避免复杂的逻辑。
• 如果需要执行一些副作用或复杂逻辑，应该将其放入计算属性或方法中。
• 组件数据的更新会自动反应到DOM中，这就是Vue的“响应式”特性。

通过本章的学习，我们了解了如何在Vue中进行插值和使用表达式，掌握了基本的语法和应用技巧。接下来，我们将深入探讨数据绑定的相关概念，这是构建动态Vue应用的核心所在。