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)成大寫(xiě) -->
{{str.toUpperCase()}} <br>
<!-- 轉(zhuǎn)成小寫(xiě)-->
{{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組件自定義v-model實(shí)現(xiàn)一個(gè)Tab組件方法示例
這篇文章主要給大家介紹了關(guān)于利用vue組件自定義v-model實(shí)現(xiàn)一個(gè)Tab組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程
最近開(kāi)始入坑前端mapbox地圖,跟大家一起慢慢深入學(xué)習(xí),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程,文中給出了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下2023-04-04
vue3實(shí)現(xiàn)el-table分批渲染表格
這篇文章主要為大家詳細(xì)介紹了vue3項(xiàng)目中如何實(shí)現(xiàn)el-table分批渲染表格,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要為大家詳細(xì)介紹了一個(gè)可復(fù)用的vue分頁(yè)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
在Vue項(xiàng)目中,通過(guò).env文件配置環(huán)境變量,支持不同環(huán)境下加載不同配置,Vite通過(guò)import.meta.env向應(yīng)用暴露環(huán)境變量,支持基本URL、開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境識(shí)別等,.env文件可設(shè)置環(huán)境優(yōu)先級(jí),修改后需重啟生效,TypeScript可通過(guò)增加文件獲取智能提示2024-10-10
vue+xlsx實(shí)現(xiàn)表格的導(dǎo)入導(dǎo)出功能
這篇文章主要介紹了vue+xlsx實(shí)現(xiàn)表格的導(dǎo)入導(dǎo)出功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了詳解vuex commit保存數(shù)據(jù)技巧，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue中使用axios請(qǐng)求post接口發(fā)送兩次
這篇文章主要為大家介紹了vue中使用axios請(qǐng)求post接口,請(qǐng)求會(huì)發(fā)送兩次原因解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
解決Vue使用mint-ui loadmore實(shí)現(xiàn)上拉加載與下拉刷新出現(xiàn)一個(gè)頁(yè)面使用多個(gè)上拉加載后沖突問(wèn)題
這篇文章主要介紹了解決Vue使用mint-ui loadmore實(shí)現(xiàn)上拉加載與下拉刷新出現(xiàn)一個(gè)頁(yè)面使用多個(gè)上拉加載后沖突問(wèn)題,需要的朋友可以參考下2017-11-11
在vue3+vite創(chuàng)建的項(xiàng)目中使用vuex，要注意的是vite有部分寫(xiě)法和之前的webpack是不同的，這篇文章主要介紹了vue3+vite中使用vuex的具體步驟,需要的朋友可以參考下2022-11-11