1.插值表达式
  1. 插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom操作可以直接将数据从模型到视图。
  2. 插值表达式就是{{ }}，括号里面可以执行简单的js代码 。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。
2.插值表达式插值表达式支持简单的语法
操作解释
常规变量number，string，boolean等
四则运+，-，*，/,%
逻辑运算或与非
三目运算
全局函数{{ Math.random() }}
对象{{ {name:“abc”,age:13} }}
数组{{ [,5,6,7,8,9] }}
3. 为什么插值表达式只支持简单的支持简单的js语法

1.防止xss攻击

  1. xss：Cross Site Scripting，跨域脚本攻击；
  2. 危害：盗取cookie，破坏页面结构；
  3. 防止csrf攻击
  4. csrf：Cross-site request forgery，跨站请求伪造
  5. 在用户不知情的情况下，模拟用户的操作，购买商品，发邮件，甚至转账
4. 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03-插值表达式</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">

        <!--vue data仓库中的变量 语法{{key}}-->
        <p>{{msg}}</p>
        <p>{{num}}</p>
        <p>{{flag}}</p>
        <p>{{arr}}</p>
        <p>{{arg1}}</p>
        <p>{{day}}</p>
        <p>{{user}}</p>
        <!-- 以字符串形式输出，调用内置对象的toString方法 -->
        <p>{{htmlstr}}</p>
        <!-- 转义符可以解析到 -->
        <p>{{str}}</p>
        <hr/>

        <!--匿名变量 ：没有配置，直接在插值表达式中写-->
        <p>{{100}}</p>
        <p>{{"字符串"}}</p>
        <p>{{false}}</p>
        <p>{{ [,5,6,7,8,9] }}</p>
        <p>{{ {name:"abc",age:13} }}</p>
        <p>{{ new Date() }}</p>
        <hr/>

        <!--js表达式-->
        <p>{{num+1}}</p>
        <p>{{num > 99}}</p>
        <p>{{20+1}}</p>
        <p>{{ false||true }}</p>
        <p>{{num &lt; 101}}</p>
        <!--
             赋值表达式：先赋值，再取值 
        -->
        <p>{{ msg='123' }}</p>
        <!-- 三目运算 -->
        <p>{{ flag?"真":"假" }}</p>
        <hr/>

        <!--
            js内置对象
            但是内置对象的名称不能和仓库变量重名
            优先取仓库中的值，再取内置的值
        -->
        <!-- 数学方法的对象 -->
        <p>{{ Math }}</p>
        <!-- 算次方的数学方法 -->
        <p>{{ Math.pow(2,2) }}</p>
        <p>{{ Math.random() }}</p>
        <!-- 内置对象属性也可以拿出来 -->
        <p>{{ Math.PI }}</p>
    </div>
</body>
<script>
        new Vue({
            el:"#app",
            data:{
                msg:"我是msg",
                num:100,
                flag:true,
                arr:[1,2,3,4,5,6],
                arg1:null,
                arg2:undefined,
                day:new Date(),
                //Math:"123", 数据key名称不允许和js内置对象一样
                htmlstr:"<h3>这是我的标签</h3>",
                // 包含转义符的字符串
                str:"aaa\nbbbb\ntttt",
                user:{
                    name:"tom",
                    age:12
                }
            }
        });
 </script>
</html>
5. 运行结果

在这里插入图片描述

# javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue