4.2.2 插值表达式

2022-06-17 21:31:42 阅读：128 来源： 互联网

语法

插值表达式可以理解为使用双大括号来包裹 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,模板,代码,Mustache
来源： https://www.cnblogs.com/Huang-zihan/p/16387077.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

4.2.2 插值表达式

语法

经验

示例 4

提示