vue中插值表達式使用的示例詳解
更新時間：2023年11月24日 09:53:03 作者：freedomSTUDENT
Vue的插值表達式是一種特殊的語法,用于在模板中動態(tài)地將數(shù)據(jù)綁定到視圖中,一般使用雙大括號 ("{{ }}")將表達式包裹起來,下面我們就來根據(jù)三個案例來深入了解下插值表達式的使用吧
作用：利用表達式進行插值渲染
語法：{ { 表達式 } }
案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--準備容器 -->
<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)建實例 -->
<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>
<!-- 創(chuàng)建實例 -->
<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>
<!-- 創(chuàng)建實例 -->
<script>
var app=new Vue({
el:'#app',
data:{
friend:{
name:'張三',
age:18
}
}
});
</script>
</body>
</html>
注意：
1. 使用的數(shù)據(jù)要存在
2. { { 里面是表達式不是語句 } }
3. 不能在標簽屬性中使用{ { } } 例如 < div id=“ { { } } ”> </div>
到此這篇關(guān)于vue中插值表達式使用的示例詳解的文章就介紹到這了,更多相關(guān)vue插值表達式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用vue組件自定義v-model實現(xiàn)一個Tab組件方法示例
這篇文章主要給大家介紹了關(guān)于利用vue組件自定義v-model實現(xiàn)一個Tab組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
最近開始入坑前端mapbox地圖,跟大家一起慢慢深入學(xué)習(xí),下面這篇文章主要給大家介紹了關(guān)于vue項目中使用mapbox地圖切換底圖的詳細教程,文中給出了詳細的實例代碼,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了vue3項目中如何實現(xiàn)el-table分批渲染表格,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要為大家詳細介紹了一個可復(fù)用的vue分頁組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
在Vue項目中,通過.env文件配置環(huán)境變量,支持不同環(huán)境下加載不同配置,Vite通過import.meta.env向應(yīng)用暴露環(huán)境變量,支持基本URL、開發(fā)環(huán)境和生產(chǎn)環(huán)境識別等,.env文件可設(shè)置環(huán)境優(yōu)先級,修改后需重啟生效,TypeScript可通過增加文件獲取智能提示2024-10-10
vue+xlsx實現(xiàn)表格的導(dǎo)入導(dǎo)出功能
這篇文章主要介紹了vue+xlsx實現(xiàn)表格的導(dǎo)入導(dǎo)出功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了詳解vuex commit保存數(shù)據(jù)技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家介紹了vue中使用axios請求post接口,請求會發(fā)送兩次原因解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
解決Vue使用mint-ui loadmore實現(xiàn)上拉加載與下拉刷新出現(xiàn)一個頁面使用多個上拉加載后沖突問題
這篇文章主要介紹了解決Vue使用mint-ui loadmore實現(xiàn)上拉加載與下拉刷新出現(xiàn)一個頁面使用多個上拉加載后沖突問題,需要的朋友可以參考下2017-11-11
在vue3+vite創(chuàng)建的項目中使用vuex，要注意的是vite有部分寫法和之前的webpack是不同的，這篇文章主要介紹了vue3+vite中使用vuex的具體步驟,需要的朋友可以參考下2022-11-11