Vue.js中關(guān)于“{{}}”的用法
更新時(shí)間：2022年09月23日 09:39:32 作者：很單純的娃
這篇文章主要介紹了Vue.js中關(guān)于“{{}}”的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
關(guān)于“{{}}”的用法
Vue.js核心庫只關(guān)注視圖層，而我們只需要注重?cái)?shù)據(jù)的操作就好，通過接下來的學(xué)習(xí)會(huì)更深的理解這句話，vue.js通過很多指令和修飾符來完成對(duì)視圖的關(guān)注，第一個(gè)是{{}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script> <!-- 使用vue.js需要先使用 -->
</head>
<body>
<div id="root">
<!-- 可以直接寫變量-->
{{userName}}
<!-- 可以寫三元表達(dá)式 -->
{{true?'男':'女'}}
<!-- 可以調(diào)用函數(shù) 功能是倒敘-->
{{userName.split("").reverse().join("")}}
</div>
</body>
<script>
new Vue({
el:'#root',//掛載的元素，只有在這個(gè)區(qū)域內(nèi)才能使用Vue
data:{
userName:'倉央嘉措',
sex:"男"，
num:1,
src:'http://img0.imgtn.bdimg.com/it/u=4150802370,1902002068&fm=11&gp=0.jpg',
str:'我是一只小小小鳥'
},//變量定義在里面
methods:{},//方法定義在這里面
filters:{},//過濾器
components:{},//組件
computed:{}//計(jì)算屬性
})
</script>
</html>
執(zhí)行結(jié)果：
Vue表達(dá)式{{}}中拼接字符
在表達(dá)式中我們一直都只綁定簡(jiǎn)單的鍵值。但實(shí)際上，對(duì)于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。
例如：
{{ number + 1 }}?? ?{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}但是最近我有一個(gè)需求，就是在表達(dá)式中進(jìn)行一個(gè)拼接。
? ? ? ? <div class="appdouble_data">
? ? ? ? ? <div class="BonusPoolDetails_data"
? ? ? ? ? v-for = 'item,index in list'
? ? ? ? ? >
? ? ? ? ? ? <div class="BonusPoolDetails_data_tit">
? ? ? ? ? ? ? {{item.start_at}}至{{item.end_at}}
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="data_flex">
? ? ? ? ? ? ? <div class="data_flex_tit flex align-cen">
? ? ? ? ? ? ? ? <div>推薦人數(shù)</div>
? ? ? ? ? ? ? ? <div>獎(jiǎng)金池</div>
? ? ? ? ? ? ? ? <div>累計(jì)獎(jiǎng)金</div>
? ? ? ? ? ? ? ? <div>獲得分紅</div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <div class="data_flex_list flex align-cen"
? ? ? ? ? ? ? v-for = 'props,key in item.has_details'
? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? <div>{{props.invite_number}}</div>
? ? ? ? ? ? ? ? <div>{{props.pool_index}}</div>
? ? ? ? ? ? ? ? <div>{{item[String(props.pool_index) + '_pool']}}</div>
? ? ? ? ? ? ? ? <div>{{props.money}}</div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>大家著重看這段代碼
{{item[String(props.pool_index) + '_pool']}}這個(gè)是利用第二個(gè)循環(huán)里的一個(gè)數(shù)據(jù)props.pool_index來拼接成第一個(gè)循環(huán)里的相對(duì)應(yīng)一個(gè)數(shù)據(jù)(item.4_pool)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue項(xiàng)目中如何解決組件之間的循環(huán)依賴
在大型?Vue?項(xiàng)目中,組件之間的關(guān)系可能會(huì)變得非常復(fù)雜,甚至?xí)霈F(xiàn)循環(huán)依賴的問題,本文將通過通俗易懂的方式,講解如何在?Vue?中解決組件之間的循環(huán)依賴問題,希望對(duì)大家有所幫助2024-11-11
vue axios 封裝請(qǐng)求攔截多次彈窗的問題及解決
這篇文章主要介紹了vue axios 封裝請(qǐng)求攔截多次彈窗的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
本文介紹了Vue的全局安裝過程、查看版本、安裝擴(kuò)展等步驟,并提供了解決在.vue文件目錄下運(yùn)行報(bào)錯(cuò)的方法,涉及到的錯(cuò)誤解決包括使用命令安裝@vue/compiler-sfc和執(zhí)行npm install命令安裝依賴2024-10-10
下面小編就為大家分享一篇axios post提交formdata的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3+vite+vant4手機(jī)端項(xiàng)目實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant4手機(jī)端項(xiàng)目實(shí)戰(zhàn)的相關(guān)資料,Vue3是一種前端開發(fā)框架,它的目標(biāo)是提供更好的性能和開發(fā)體驗(yàn),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue3中如何自定義雙向綁定問題,具有很好的參考價(jià)價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue下滾動(dòng)到頁面底部無限加載數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue下滾動(dòng)到頁面底部無限加載數(shù)據(jù)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了element-ui 彈窗組件封裝的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
基于vue.js實(shí)現(xiàn)側(cè)邊菜單欄
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)側(cè)邊菜單欄的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03