- 前言： 在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)//如果是兩者都不是，則強轉成字符串
}
