vue中的插值表达式
Posted wuliangfan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中的插值表达式相关的知识，希望对你有一定的参考价值。
- 前言： 在html页面上只能展示字符串，console.log()打印出的也是字符串，意味着都会调用toString()方法，但实际上控制台展示的既有数组又有对象等类型，那是由于浏览器会进行处理
- 用法： 使用在vue实例对象对应的DOM元素的html的正反标签之间
- 支持匿名变量
- 支持三目运算符
- 数值
- 支持四则运算
- 支持比较运算符
- 支持数值类型的一些内置方法
- 数组
- 支持数组的索引取值方法
- 对象：支持对象的属性
- window内置对象的Math的属性和方法：如果data中也有一个Math，那么vue对象的数据仓库优先级最高
<!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()方法
// 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中的插值表达式的主要内容，如果未能解决你的问题，请参考以下文章