在模板中使用 JavaScript 表达式

浏览 24

课文

这节课我们来学习如何在 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