Vue.js中關(guān)于“{{}}”的用法
更新時間：2022年09月23日 09:39:32 作者：很單純的娃
這篇文章主要介紹了Vue.js中關(guān)于“{{}}”的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
關(guān)于“{{}}”的用法
Vue.js核心庫只關(guān)注視圖層，而我們只需要注重數(shù)據(jù)的操作就好，通過接下來的學(xué)習(xí)會更深的理解這句話，vue.js通過很多指令和修飾符來完成對視圖的關(guān)注，第一個是{{}}
<!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',//掛載的元素，只有在這個區(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:{}//計算屬性
})
</script>
</html>
執(zhí)行結(jié)果：
Vue表達(dá)式{{}}中拼接字符
在表達(dá)式中我們一直都只綁定簡單的鍵值。但實(shí)際上，對于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。
例如：
{{ number + 1 }}?? ?{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}但是最近我有一個需求，就是在表達(dá)式中進(jìn)行一個拼接。
? ? ? ? <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>獎金池</div>
? ? ? ? ? ? ? ? <div>累計獎金</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']}}這個是利用第二個循環(huán)里的一個數(shù)據(jù)props.pool_index來拼接成第一個循環(huán)里的相對應(yīng)一個數(shù)據(jù)(item.4_pool)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue2.x對象深層劫持的原理實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue data中如何獲取使用store中的變量，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本文主要介紹了el-table渲染慢卡頓問題最優(yōu)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了解決vue頁面注入js修改input值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue?FileManagerPlugin?報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue使用天地圖、openlayers實(shí)現(xiàn)多個底圖疊加顯示效果
這篇文章主要介紹了vue使用天地圖、openlayers實(shí)現(xiàn)多個底圖疊加顯示,根據(jù)返回的經(jīng)緯度列表通過天地圖、openlayers實(shí)現(xiàn)底圖添加，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-04-04
這篇文章主要介紹了vue 插槽簡介及使用示例，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
vue路由跳轉(zhuǎn)攜帶參數(shù)的方式總結(jié)
我們知道在vue中每個頁面都需要在路由中聲明,下面這篇文章主要給大家介紹了關(guān)于vue路由跳轉(zhuǎn)攜帶參數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue鼠標(biāo)hover(懸停)改變background-color移入變色問題
這篇文章主要介紹了vue鼠標(biāo)hover(懸停)改變background-color移入變色問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10