3.Vue插值表达式

1.插值表达式插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom操作可以直接将数据从模型到视图。插值表达式就是{{ }}，括号里面可以执行简单的js代码。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。2.插值表达式插值表达式支持简单的语法操作解释常规变量number，string，boolean等四则运+，-，*，/,%逻辑运算或与非三目运算全局函数{{ Mat

西瓜咬人啦

4564人浏览 · 2020-10-20 10:49:51

西瓜咬人啦 · 2020-10-20 10:49:51 发布

1.插值表达式

插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom操作可以直接将数据从模型到视图。
插值表达式就是{{ }}，括号里面可以执行简单的js代码。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。

2.插值表达式插值表达式支持简单的语法

操作	解释
常规变量	number，string，boolean等
四则运	+，-，*，/,%
逻辑运算	或与非
三目运算
全局函数	{{ Math.random() }}
对象	{{ {name:“abc”,age:13} }}
数组	{{ [,5,6,7,8,9] }}

3. 为什么插值表达式只支持简单的支持简单的js语法

1.防止xss攻击

xss：Cross Site Scripting，跨域脚本攻击；
危害：盗取cookie，破坏页面结构；
防止csrf攻击
csrf：Cross-site request forgery，跨站请求伪造
在用户不知情的情况下，模拟用户的操作，购买商品，发邮件，甚至转账

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. 运行结果

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

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}$/, //不连续的两位字母// /^