vue中插值表達(dá)式使用的示例詳解
更新時(shí)間：2023年11月24日 09:53:03 作者：freedomSTUDENT
Vue的插值表達(dá)式是一種特殊的語(yǔ)法,用于在模板中動(dòng)態(tài)地將數(shù)據(jù)綁定到視圖中,一般使用雙大括號(hào) ("{{ }}")將表達(dá)式包裹起來(lái),下面我們就來(lái)根據(jù)三個(gè)案例來(lái)深入了解下插值表達(dá)式的使用吧
作用：利用表達(dá)式進(jìn)行插值渲染
語(yǔ)法：{ { 表達(dá)式 } }
案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--準(zhǔn)備容器 -->
<div id="app">
{{str}} <br>
<!-- 轉(zhuǎn)成大寫 -->
{{str.toUpperCase()}} <br>
<!-- 轉(zhuǎn)成小寫-->
{{str.toLowerCase()}} <br>
<!-- 拼接 -->
{{str+'world'}} <br>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 創(chuàng)建實(shí)例 -->
<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>
<!--準(zhǔn)備容器 -->
<div id="app">
{{age>=18? '成年':'未成年'}}
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 創(chuàng)建實(shí)例 -->
<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>
<!--準(zhǔn)備容器 -->
<div id="app">
{{friend.name}} <br>
{{friend.age}}
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 創(chuàng)建實(shí)例 -->
<script>
var app=new Vue({
el:'#app',
data:{
friend:{
name:'張三',
age:18
}
}
});
</script>
</body>
</html>
注意：
1. 使用的數(shù)據(jù)要存在
2. { { 里面是表達(dá)式不是語(yǔ)句 } }
3. 不能在標(biāo)簽屬性中使用{ { } } 例如 < div id=“ { { } } ”> </div>
到此這篇關(guān)于vue中插值表達(dá)式使用的示例詳解的文章就介紹到這了,更多相關(guān)vue插值表達(dá)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue布置導(dǎo)航守衛(wèi)獲取用戶信息，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vuex如何獲取getter對(duì)象中的值(包括module中的getter)
這篇文章主要介紹了Vuex如何獲取getter對(duì)象中的值(包括module中的getter)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實(shí)現(xiàn)方式就是利用vuex中的mutations，在mutations中定義一個(gè)方法，這個(gè)方法就是把點(diǎn)擊的index（也就是每個(gè)列表的唯一標(biāo)識(shí)），傳給state中的當(dāng)前標(biāo)識(shí)，需要的朋友可以參考下2023-01-01
Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離
這篇文章主要為大家詳細(xì)介紹了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
vue2安裝vue-router報(bào)錯(cuò)的解決方法
vue-router的安裝不是理想化的,會(huì)出現(xiàn)問(wèn)題,需要靜下心認(rèn)真研究,熬過(guò)去就會(huì)懂得更多,這篇文章主要給大家介紹了關(guān)于vue2安裝vue-router報(bào)錯(cuò)的解決方法,需要的朋友可以參考下2022-03-03
Vue3新特性Composition?API實(shí)戰(zhàn)指南
Vue3的發(fā)布標(biāo)志著這個(gè)流行前端框架的重大升級(jí),其中最引人注目的變化是引入了Composition?API,本文將深入探討Vue3的新特性,特別是Composition?API的實(shí)際應(yīng)用,幫助開(kāi)發(fā)者掌握這一強(qiáng)大工具,需要的朋友可以參考下2025-07-07
vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)
本文主要介紹了vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue項(xiàng)目安裝scss常見(jiàn)報(bào)錯(cuò)處理方式
這篇文章主要介紹了vue項(xiàng)目安裝scss常見(jiàn)報(bào)錯(cuò)處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue指令是Vue.js框架的核心特性之一,通過(guò)在HTML標(biāo)簽上添加以v-為前綴的特殊屬性,開(kāi)發(fā)者可以聲明式地將數(shù)據(jù)綁定到DOM、實(shí)現(xiàn)條件渲染、循環(huán)渲染等復(fù)雜交互邏輯,這篇文章主要介紹了Vue3.0中一些好用的指令封裝的相關(guān)資料,需要的朋友可以參考下2026-04-04
vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法
這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法,需要的朋友可以參考下2022-03-03