VUE表达式{{}}中如何拼接字符
作者：赵四_
这篇文章主要介绍了VUE表达式{{}}中如何拼接字符问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
VUE表达式{{}}中拼接字符
在表达式中我们一直都只绑定简单的键值。
但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
例如：
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}但是最近我有一个需求，就是在表达式中进行一个拼接。
<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>推荐人数</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']}}这个是利用第二个循环里的一个数据props.pool_index来拼接成第一个循环里的相对应一个数据(item.4_pool)
VUE字符串拼接路由path路径
功能：产品列表页面进入产品详情页面，产品详情中四个模块之间切换
products.vue进入detail.vue页面,
detail.vue中配置子路由
第一步
products.vue
<ul class="pro"> <router-link to="/detail/pro1" tag="li">产品1</router-link> <router-link to="/detail/pro2" tag="li">产品2</router-link> <router-link to="/detail/pro3" tag="li">产品3</router-link> <router-link to="/detail/pro4" tag="li">产品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中接收产品列表中传递过来的参数，并实现子路由的切换
<ul class="detail-left">
<li><h3>产品{{this.$route.params.id}}</h3></li>
<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c1"}'>数据统计</router-link>
<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c2"}'>数据预测</router-link>
<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c3"}'>数据分析</router-link>
<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c4"}'>广告发布</router-link>
</ul>注意：
1.接参数的方式是this.$route.params.id中的id和路由中配置的 path: '/detail/:id’的id对应,这个id相当于一个变量
2.路由路径中字符串拼接放方式可以这样写
: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
},
]
}
]
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。