在模板中使用 JavaScript 表达式

浏览 221

课文

这节课我们来学习如何在 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 应用程序语法的复杂性。

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1