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>
<!-- 轉成大寫 -->
{{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>
<!-- 創(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>
到此這篇關于vue中插值表達式使用的示例詳解的文章就介紹到這了,更多相關vue插值表達式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Vue布置導航守衛(wèi)獲取用戶信息，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Vuex如何獲取getter對象中的值(包括module中的getter)
這篇文章主要介紹了Vuex如何獲取getter對象中的值(包括module中的getter)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實現(xiàn)方式就是利用vuex中的mutations，在mutations中定義一個方法，這個方法就是把點擊的index（也就是每個列表的唯一標識），傳給state中的當前標識，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了Vue+axios封裝請求實現(xiàn)前后端分離，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
vue-router的安裝不是理想化的,會出現(xiàn)問題,需要靜下心認真研究,熬過去就會懂得更多,這篇文章主要給大家介紹了關于vue2安裝vue-router報錯的解決方法,需要的朋友可以參考下2022-03-03
Vue3新特性Composition?API實戰(zhàn)指南
Vue3的發(fā)布標志著這個流行前端框架的重大升級,其中最引人注目的變化是引入了Composition?API,本文將深入探討Vue3的新特性,特別是Composition?API的實際應用,幫助開發(fā)者掌握這一強大工具,需要的朋友可以參考下2025-07-07
vite中的glob-import批量導入的實現(xiàn)
本文主要介紹了vite中的glob-import批量導入的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了vue項目安裝scss常見報錯處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue指令是Vue.js框架的核心特性之一,通過在HTML標簽上添加以v-為前綴的特殊屬性,開發(fā)者可以聲明式地將數(shù)據(jù)綁定到DOM、實現(xiàn)條件渲染、循環(huán)渲染等復雜交互邏輯,這篇文章主要介紹了Vue3.0中一些好用的指令封裝的相關資料,需要的朋友可以參考下2026-04-04
這篇文章主要給大家介紹了關于vue2項目中封裝echarts地圖的優(yōu)雅方法,需要的朋友可以參考下2022-03-03