Vue.js中關(guān)于“{{}}”的用法
更新時(shí)間：2022年09月23日 09:39:32 作者：很單純的娃
這篇文章主要介紹了Vue.js中關(guān)于“{{}}”的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
關(guān)于“{{}}”的用法
Vue.js核心庫(kù)只關(guān)注視圖層，而我們只需要注重?cái)?shù)據(jù)的操作就好，通過(guò)接下來(lái)的學(xué)習(xí)會(huì)更深的理解這句話，vue.js通過(guò)很多指令和修飾符來(lái)完成對(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">
<!-- 可以直接寫(xiě)變量-->
{{userName}}
<!-- 可以寫(xiě)三元表達(dá)式 -->
{{true?'男':'女'}}
<!-- 可以調(diào)用函數(shù) 功能是倒敘-->
{{userName.split("").reverse().join("")}}
</div>
</body>
<script>
new Vue({
el:'#root',//掛載的元素，只有在這個(gè)區(qū)域內(nèi)才能使用Vue
data:{
userName:'倉(cāng)央嘉措',
sex:"男"，
num:1,
src:'http://img0.imgtn.bdimg.com/it/u=4150802370,1902002068&fm=11&gp=0.jpg',
str:'我是一只小小小鳥(niǎo)'
},//變量定義在里面
methods:{},//方法定義在這里面
filters:{},//過(guò)濾器
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來(lái)拼接成第一個(gè)循環(huán)里的相對(duì)應(yīng)一個(gè)數(shù)據(jù)(item.4_pool)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問(wèn)題
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue2.x對(duì)象深層劫持的原理實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue data中如何獲取使用store中的變量，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
el-table渲染慢卡頓問(wèn)題最優(yōu)解決方案
本文主要介紹了el-table渲染慢卡頓問(wèn)題最優(yōu)解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
解決vue頁(yè)面注入js修改input值問(wèn)題
這篇文章主要介紹了解決vue頁(yè)面注入js修改input值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue?FileManagerPlugin?報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vue?FileManagerPlugin?報(bào)錯(cuò)問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示效果
這篇文章主要介紹了vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示,根據(jù)返回的經(jīng)緯度列表通過(guò)天地圖、openlayers實(shí)現(xiàn)底圖添加，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-04-04
這篇文章主要介紹了vue 插槽簡(jiǎn)介及使用示例，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
vue路由跳轉(zhuǎn)攜帶參數(shù)的方式總結(jié)
我們知道在vue中每個(gè)頁(yè)面都需要在路由中聲明,下面這篇文章主要給大家介紹了關(guān)于vue路由跳轉(zhuǎn)攜帶參數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue鼠標(biāo)hover(懸停)改變background-color移入變色問(wèn)題
這篇文章主要介紹了vue鼠標(biāo)hover(懸停)改變background-color移入變色問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10