4.2.2 插值表达式
2022/6/17 23:28:12
本文主要是介绍4.2.2 插值表达式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
语法
插值表达式可以理解为使用双大括号来包裹 JS 代码,作用是将双大括号中的数据替换成对应属性值进行展示。
双大括号语法也叫模板语法(Mustache 语法)。Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构下面,前端模板引擎是一种可以被考虑的技术选型。随着前端框架(AngularJS、ReactJS、Vue)的流行,前端的模板技术已经成为某种形式上的标配,Mustache 的价值在于其稳定和经典。
经验
关于更多的 Mustache 方面的技能,请参考 Mustache 主页。
下面来看插值表达式中可以写入哪些内容。
- JSON 数据
- 数字
- 字符串
- 插值表达式
在示例 3 的基础上,演示一下插值表达式中其他插入内容的具体使用情况,如示例 4 代码所示。
示例 4
<template> <div> <!-- json 数据(变量)--> <h1>{{ msg }}</h1> <!-- 数字 --> <p>{{ 10 }}</p> <!-- 字符串 --> <h1>{{ "黄子涵" }}</h1> <!-- 字符串 --> <h1>{{ 1+1 }}</h1> <h1>{{ '你好,'+ name }}</h1> <h1>{{ 2>3?'true':'false' }}</h1> </div> </template> <script> export default { name: 'APP', data() { return { msg: '黄子涵', name: '黄子涵' } } } </script> <style scoped> </style>
在浏览器中运行,显示效果如下图所示。
在插值表达式中需要注意区分变量和字符串,使用引号包裹的为字符串,没有使用引号包裹的,都会被系统解析成变量名或方法名。
在示例 4 中,使用到了三目运算符(也称二元运算符,即问号冒号表达式,能够代替 if else 使用),说明可在插值表达式中写入 JS 代码。但是不推荐在这里写复杂的代码,原因是 MVVM 的设计就是为了使页面和数据进行很好的分离,如果在表达式中写入过多的逻辑代码,那么就违背了最初的设计思想 ,也会使代码看起来很复杂,难以维护。
提示
Vue 框架自带模板引擎,因此在使用 Vue 框架的过程中不需要再去搭配其他模板引擎,这个自带的模板引擎就是指插值表达式。
这篇关于4.2.2 插值表达式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)