【Vue】插值表达式

作用：利用表达式进行插值渲染

语法：{ { 表达式 } }

案例一：

案例二：

案例三：

编辑

注意：

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--准备容器  -->
<div id="app">
   {{str}}          <br>
    <!-- 转成大写 -->
    {{str.toUpperCase()}} <br>
    <!-- 转成小写-->
    {{str.toLowerCase()}} <br>
    <!-- 拼接 -->
    {{str+'world'}}      <br>

</div>

<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!-- 创建实例 -->
<script>
      var  app=new Vue({
        el:'#app',
        data:{
            str: 'Hello'
        }
    });
</script>

</body>
</html>

案例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--准备容器  -->
<div id="app">
  {{age>=18? '成年':'未成年'}}

</div>

<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!-- 创建实例 -->
<script>
      var  app=new Vue({
        el:'#app',
        data:{
          age:18
        }
    });
</script>
</body>
</html>

案例三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--准备容器  -->
<div id="app">
  {{friend.name}} <br>
    {{friend.age}}

</div>

<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!-- 创建实例 -->
<script>
      var  app=new Vue({
        el:'#app',
        data:{
          friend:{
              name:'张三',
              age:18
          }
        }
    });
</script>
</body>
</html>