作用：利用表達式進行插值渲染
語法：{ { 表達式 } }
目錄
案例一：
案例二：
案例三：
?編輯?
注意：
案例一：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--準備容器 -->
<div id="app">{{str}} <br><!-- 轉成大寫 -->{{str.toUpperCase()}} <br><!-- 轉成小寫-->{{str.toLowerCase()}} <br><!-- 拼接 -->{{str+'world'}} <br></div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 創建實例 -->
<script>var app=new Vue({el:'#app',data:{str: 'Hello'}});
</script></body>
</html>
?
案例二：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--準備容器 -->
<div id="app">{{age>=18? '成年':'未成年'}}</div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 創建實例 -->
<script>var app=new Vue({el:'#app',data:{age:18}});
</script>
</body>
</html>
案例三：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--準備容器 -->
<div id="app">{{friend.name}} <br>{{friend.age}}</div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 創建實例 -->
<script>var app=new Vue({el:'#app',data:{friend:{name:'張三',age:18}}});
</script>
</body>
</html>
?
注意：
1.? ?使用的數據要存在
2.? ?{ {? 里面是表達式不是語句? } }?
3.? ?不能在標簽屬性中使用{ { } } 例如 < div id=“ { { } } ”> </div>
)
)