VUE表達(dá)式{{}}中如何拼接字符
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)
VUE字符串拼接路由path路徑
功能:產(chǎn)品列表頁(yè)面進(jìn)入產(chǎn)品詳情頁(yè)面,產(chǎn)品詳情中四個(gè)模塊之間切換
products.vue進(jìn)入detail.vue頁(yè)面,
detail.vue中配置子路由
第一步
products.vue
<ul class="pro"> ?? ??? ?<router-link to="/detail/pro1" tag="li">產(chǎn)品1</router-link> ?? ??? ?<router-link to="/detail/pro2" tag="li">產(chǎn)品2</router-link> ?? ??? ?<router-link to="/detail/pro3" tag="li">產(chǎn)品3</router-link> ?? ??? ?<router-link to="/detail/pro4" tag="li">產(chǎn)品4</router-link> </ul>
第二步
router/index.js 路由配置
? ? ?{ ? ? ? path: '/detail/:id', ? ? ? component: Detail, ?? ??? ??? ?children:[ ?? ??? ??? ??? ? ? { path: 'c1', component: C1}, ?? ??? ??? ??? ? ? { path: 'c2', component: C2}, ?? ??? ??? ??? ? ? { path: 'c3', component: C3}, ?? ??? ??? ??? ? ? { path: 'c4', component: C4} ?? ??? ??? ?] ? ? }
第三步
detail.vue中接收產(chǎn)品列表中傳遞過(guò)來(lái)的參數(shù),并實(shí)現(xiàn)子路由的切換
<ul class="detail-left"> <li><h3>產(chǎn)品{{this.$route.params.id}}</h3></li> ?? ?<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c1"}'>數(shù)據(jù)統(tǒng)計(jì)</router-link> ?? ?<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c2"}'>數(shù)據(jù)預(yù)測(cè)</router-link> ?? ?<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c3"}'>數(shù)據(jù)分析</router-link> ?? ?<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c4"}'>廣告發(fā)布</router-link> </ul>
注意:
1.接參數(shù)的方式是this.$route.params.id中的id和路由中配置的 path: '/detail/:id’的id對(duì)應(yīng),這個(gè)id相當(dāng)于一個(gè)變量
2.路由路徑中字符串拼接放方式可以這樣寫(xiě)
:to='{path:"/detail/"+this.$route.params.id+"/c1"}'
完整index.js配置如下
import Vue from 'vue' import Router from 'vue-router' import Detail from "../detail/detail" import Home from "../home/home" import C1 from "../detail/child1" import C2 from "../detail/child2" import C3 from "../detail/child3" import C4 from "../detail/child4" import HotDetail from "../home/hot-detail" Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Home }, { path:"/hotdetail", component:HotDetail }, { path: '/detail/:id', component: Detail, children:[ { path: 'c1', component: C1 }, { path: 'c2', component: C2 }, { path: 'c3', component: C3 }, { path: 'c4', component: C4 }, ] } ] })
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
一文詳解vue-router如何實(shí)現(xiàn)動(dòng)態(tài)路由
在構(gòu)建基于Vue.js的單頁(yè)面應(yīng)用(SPA)時(shí),Vue?Router是一個(gè)不可或缺的工具,本文將詳細(xì)介紹動(dòng)態(tài)路由的概念與作用及其在Vue?Router中的具體實(shí)現(xiàn),需要的可以參考下2024-11-11解決axios發(fā)送post請(qǐng)求返回400狀態(tài)碼的問(wèn)題
今天小編就為大家分享一篇解決axios發(fā)送post請(qǐng)求返回400狀態(tài)碼的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08element el-table 表格限制多選個(gè)數(shù)功能
這篇文章主要介紹了element el-table 表格限制多選個(gè)數(shù)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03Vuejs入門(mén)教程之Vue生命周期,數(shù)據(jù),手動(dòng)掛載,指令,過(guò)濾器
本篇文章主要介紹了Vuejs入門(mén)教程之Vue生命周期,數(shù)據(jù),手動(dòng)掛載,指令,過(guò)濾器的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04Vue項(xiàng)目路由刷新的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue項(xiàng)目路由刷新的實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04Vue路由守衛(wèi)及頁(yè)面登錄權(quán)限控制的設(shè)置方法(兩種)
這篇文章主要介紹了Vue路由守衛(wèi)及頁(yè)面登錄權(quán)限控制的設(shè)置方法,本文通過(guò)實(shí)例代碼通過(guò)兩種方法給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03vue項(xiàng)目強(qiáng)制清除頁(yè)面緩存的例子
今天小編就為大家分享一篇vue項(xiàng)目強(qiáng)制清除頁(yè)面緩存的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11使用echarts柱狀圖實(shí)現(xiàn)select下拉刷新數(shù)據(jù)
這篇文章主要介紹了使用echarts柱狀圖實(shí)現(xiàn)select下拉刷新數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10