vue中的插值表达式

it2022-05-05  300

前言: 在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)//如果是两者都不是,则强转成字符串 }

 


最新回复(0)