欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE表達(dá)式{{}}中如何拼接字符

 更新時(shí)間:2023年07月05日 14:50:57   作者:趙四_  
這篇文章主要介紹了VUE表達(dá)式{{}}中如何拼接字符問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)文章

最新評(píng)論