vue中的插值表达式
前⾔:在html页⾯上只能展⽰字符串,console.log()打印出的也是字符串,意味着都会调⽤toString()⽅法,但实际上控制台展⽰的既有数组⼜有对象等类型,那是由于浏览器会进⾏处理
⽤法:使⽤在vue实例对象对应的DOM元素的html的正反标签之间
⽀持匿名变量
⽀持三⽬运算符
数值
⽀持四则运算
⽀持⽐较运算符
⽀持数值类型的⼀些内置⽅法
数组
⽀持数组的索引取值⽅法
对象:⽀持对象的属性
window内置对象的Math的属性和⽅法:如果data中也有⼀个Math,那么vue对象的数据仓库优先级最⾼
<!DOCTYPE html>
vuejson转对象<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>{{ Fixed(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)//如果是两者都不是,则强转成字符串
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论