泰國浪琴手表網(wǎng)站新人學(xué)會seo
前言
持續(xù)學(xué)習(xí)總結(jié)輸出中，今天分享的是插值表達(dá)式 {{}}
Vue插值表達(dá)式是一種Vue的模板語法，我們可以在模板中動態(tài)地用插值表達(dá)式渲染出Vue提供的數(shù)據(jù)綁定到視圖中。插值表達(dá)式使用雙大括號{{ }}將表達(dá)式包裹起來。
1.作用：
利用表達(dá)式進(jìn)行插值，渲染到頁面中
表達(dá)式：是可以被求值的代碼，JS引擎會講其計算出一個結(jié)果
如：以下的情況都是表達(dá)式
money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真貴':'還行'
obj.name
arr[0]
fn()
obj.fn()
2.語法
插值表達(dá)式語法：{{ 表達(dá)式 }}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>插值表達(dá)式</title>
</head>
<body>
<div id="app"><p>{{ nickname }}</p><p>{{ nickname.toUpperCase() }}</p><p>{{ nickname + '你好' }}</p><p>{{ age >= 18 ? '成年' : '未成年' }}</p><p>{{ friend.name }}</p><p>{{ friend.desc }}</p>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {nickname: 'tony',age: 18,friend: {name: 'jepson',desc: '熱愛學(xué)習(xí) Vue'}}})
</script>
</body>
</html>
運(yùn)行結(jié)果：
3.錯誤用法
1.在插值表達(dá)式中使用的數(shù)據(jù) 必須在data中進(jìn)行了提供
<p>{{hobby}}</p> //如果在data中不存在 則會報錯2.支持的是表達(dá)式，而非語句，比如：if for ...
<p>{{if}}</p>3.不能在標(biāo)簽屬性中使用 {{ }} 插值 (插值表達(dá)式只能標(biāo)簽中間使用)
<p title="{{username}}">我是P標(biāo)簽</p>
4.總結(jié)
- 插值表達(dá)式的作用是什么?
利用表達(dá)式進(jìn)行插值，將數(shù)據(jù)渲染頁面中 - 語法格式?
{{ 表達(dá)式 }} - 插值表達(dá)式的注意點(diǎn):
1、使用的數(shù)據(jù)要存在 (data)
2、支持的是表達(dá)式，而非語句 if … for
3、不能在標(biāo)簽屬性里面使用
最后分享一句話：
生活的最好狀態(tài)是冷冷清清的風(fēng)風(fēng)火火。
——木心
本次的分享就到這里了！！！