这节课我们来学习如何在 Vue.js 插值表达式中使用原始的 JavaScript 表达式。

Vue 支持使用插值表达式（{{}}）来动态的组合 data 和 methods 到 template 中。

并且可以根据 data 的变化来自动更新虚拟 DOM 和实际 DOM。

Vue 的这种机制，使得它创建了一个可管理的模块化架构，有助于更好地组织应用程序。

但是，在编写短期使用或一次性使用的方法时，按照这种组织结构来编写所有这些操作可能会显得很多余。

JavaScript 表达式的优点

Vue 在插值表达式中支持 JavaScript 表达式。

支持 JavaScript 表达式意味着您可以在 {{}} 符号中编写完整的 JavaScript 表达式，Vue 将会对它进行处理。

然后，它将被运行，并得到它的结果。

例如，{{ ok ? 'YES' : 'NO' }}，如果 ok 的值为 true，则解析为“YES”，否则解析为“NO”。

运行下面提供的可执行应用程序示例：

new Vue({
  el: '#app',
  template:
  `<div>
    <div> <b>问题:</b> 你今天心情好吗? </div>
    <div> <b>Ans:</b> {{ ok ? 'YES' : 'NO' }} </div>
  </div>
  `,
  data: {
      ok: true   // 尝试改变这个值为 false，并重新运行程序
  }
})

如上例所示，JavaScript 表达式根据变量 ok 的值被解析为“YES”或“NO”。

**需要注意：**每个插值表达式中只能包含一个表达式。

语句和多行代码将不起作用。例如， {{ var a = 1 }} 是一个语句而不是一个表达式。

诸如此类的控制语句 {{ if (ok) { return "YES"; } else { return "NO"; } }} 也不起作用。

请使用三元表达式{{ ok ? "YES" : "NO" }}！

JavaScript 表达式有什么用？

在某些情况下，您只需要以处理过的形式显示变量一次。例如，提供name了某个位置的变量。您想以大写字母显示名称。

因此，在不使用 JavaScript 表达式的情况下，您必须定义另一个函数 methods 来单独执行此操作！这个示例在下面的可执行应用程序中：

new Vue({
  el: '#app',
  template:
  `<div>
    <h1 style="text-align: center;">证书</h1>
    <div style="text-align: center; font-size: 15px;"> 这本证书颁发给：</div>
    <br>
    <div style="text-align: center; font-size: 25px;">  {{ capitalize(name) }} </div>
  </div>
  `,
  data: {
      name: 'Levis Scott'
  },
  methods: {
    capitalize(passedName){
      return passedName.toUpperCase();
    }
  }
})

在上面的示例中，capitalize 函数将名称作为参数并返回一个大写的名称。

但是，这是一次性使用所需要的函数。

现在，看看这是如何通过使用 JavaScript 表达式以更简单、更短的方式完成的。

请参阅下面的可执行代码示例，该示例使用 JavaScript 表达式执行与上述相同的任务。

new Vue({
  el: '#app',
  template:
  `<div>
    <h1 style="text-align: center;">证书</h1>
    <div style="text-align: center; font-size: 15px;"> 这本证书颁发给：</div>
    <br>
    <div style="text-align: center; font-size: 25px;">  {{ name.toUpperCase() }} </div>
  </div>
  `,
  data: {
      name: 'Levis Scott'
  }
})

观察上面代码示例的第 8 行，我们实现了相同的任务，但代码更少，并且没有额外定义任何函数！

因此，支持 JavaScript 表达式的特性使我们能够节省时间并降低 Vue.js 应用程序语法的复杂性。