vue中的插值表达式
2019-07-18 11:40
155 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wuliangfan/article/details/96427688
数组
对象:支持对象的属性
window内置对象的Math的属性和方法:如果data中也有一个Math,那么vue对象的数据仓库优先级最高
- 前言: 在html页面上只能展示字符串,console.log()打印出的也是字符串,意味着都会调用toString()方法,但实际上控制台展示的既有数组又有对象等类型,那是由于浏览器会进行处理
- 用法: 使用在vue实例对象对应的DOM元素的html的正反标签之间 支持匿名变量
- 支持三目运算符
- 数值 支持四则运算
- 支持比较运算符
- 支持数值类型的一些内置方法
- 支持数组的索引取值方法
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <!-- 字符串 --> <p>{{ str }}</p> <!--页面展示:字符串--> <p>{{ num + 'aaa'}}</p><!--页面展示:1aaa--> <p>{{ str.length }}</p> <!--页面展示:3--> <!-- 数值 --> <p>{{ num }}</p> <!--页面展示:1--> <p>{{ num+num1 }}</p> <!--页面展示:101--> <p>{{ num > num1 }}</p> <!--页面展示:false--> <p>{{ num.toFixed(2) }}</p> <!--页面展示:1.00--> <!-- boolean --> <p>{{ flag }}</p> <!--页面展示:true--> <!-- 数组 --> <p>{{ arr }}</p> <!--页面展示:[1,2,3,4]--> <p>{{ arr[3] }}</p> <!--页面展示:4--> <!-- 对象 --> <p>{{ obj }}</p> <!--页面展示:{ "name": "tom", "age": 20 }--> <p>{{ obj.name }}</p> <!--页面展示:tom--> <!-- null/undefined/NaN --> <p>{{ arg1 }}</p> <!--页面展示:--> <p>{{ arg2 }}</p> <!--页面展示:--> <p>{{ arg3 }}</p> <!--页面展示:NaN--> <!-- 三目运算符 --> <p>{{ num > num1 ? "是" : "否" }}</p> <!--页面展示:否--> </div> <script> new Vue({ el:"#app", data:{ str: '字符串', num: 1, num1:100, flag: true, arr: [1,2,3,4], obj:{ name:'tom', age:20 }, arg1: null, arg2: undefined, arg3: NaN } }) </script> </body> </html>
- 数据来源: 对应的vue实例对象的data仓库以及window内置对象的Math
- 原理: 使用的是dom对象的innerText属性,所以不会做字符串解析
- vue改写了js中的toString()方法
[code]// undefined == null; 比较如果是同类型则直接对比,如果不是则转换成Boolean进行对比 // typeof数组 也是object // 对象如果使用toString(),则转换成[object object] function toString (val) { return val == null? ''//如果是null,则转换成空字符串 : typeof val === 'object'//如果是对象,使用JSON.stringify转换成字符串 ? JSON.stringify(val, null, 2) : String(val)//如果是两者都不是,则强转成字符串 }
相关文章推荐
- 去除vue插值表达式{{}}
- vue.js插值与表达式
- angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据
- 解决:angular.js中插值表达式为HTML时需要被渲染的问题
- vue中绑定属性时添加表达式的书写方式!!
- vue.js 微信浏览器不支持lambda表达式
- Vue.js学习笔记: 数据绑定语法---绑定表达式
- 避免vue表达式在加载时的闪烁
- Vue------第一天(Vue实例;模板语法:插值、指令、缩写)
- web前端vue实现插值文本和输出原始html
- Vue的表达式和常用指令
- vue判断是否是数字的正则表达式
- vue 插值 v-once,v-text, v-html详解
- js去掉html字符串中的所有标签元素,结合vue表达式使用
- 基于Vue的cron表达式
- vue.js提交按钮时进行简单的if判断表达式详解
- 中缀表达式转后缀表达式(用于求字符串表达式值)(js栈和队列的实现是通过数组的push和unshift方法插值,pop方法取值)
- 基于vue2.0+正则表达式编写的插件
- vue.js实现插入数值与表达式的方法分析
- vue中的js类表达式