Vue—插值表达式

一 插值表达式概念

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,就是指插值表达式

表达形式：{{属性名称}}

功能：类似于模板引擎中的“输出表达式”，主要用于渲染指定的数据

在进行解析的时候，插值表达式将会被替代为对应数据对象上指名名称属性的值，无论何时，绑定的数据对象上的属性值发生了改变，插值处的内容都会更新。

当你需要在页面中渲染指定数据的时候，可以考虑使用插值表达式

<p>{{msg}}<p>

二 插值表达式基本使用

1. 直接在插值表达式中指定要渲染的数据属性，数据必须先定义好
2. 可以在插值表达式中进行字符串的拼接
3. 可以在插值表达式中调用api
4. 可以在插值表达式中使用三元表达式
5. 不能在插值表达式中使用如for,if等逻辑结构
6. 不要在插值表达式中使用自增，自减和单目运算符

<template>
  <div>
      <h2>插值表达式的使用</h2>
      <!-- 1.基本使用,插值里面的写的必须是在data定义好的变量 -->
      <p>{{name}}</p>
      <!-- 2.拼接字符串 -->
      <p>{{"我的名字叫：" + name}}</p>
      <!-- 3.能够使用api -->
      <p>{{name.toUpperCase()}}</p>
      <!-- 4.能够添加表达式 -->
      <p>{{age > 18 ? '成年' : '未成年'}}</p>
  </div>
</template>

三 使用插值表达式常见的错误

1. 插值表达式中使用的变量必须要先定义好
2. 插值只能写在标签之间，不能做为标签的属性
3. 不能在插值中添加如if这样的逻辑语句和关键字