循环体为:
<div class="cards" v-for="item in card" @click="details(item.name)">
<el-card class="trends" >
<div class="out">
<div class="name">{{item.name }}</div>
<el-badge is-dot class="item">
<div class="count">{{item.count}}</div>
</el-badge>
</div>
</el-card>
</div>
js里给定循环参数
data() {
return {
card:[
{name: '分类1',count:'5个'},
{name: '分类2',count:'5个'},
]
}
},
循环效果图
思路:
我们想设置的是只点参数点击跳转,所以需要指定不相同的数据参数,选用name作为指定的参数,当name值为分类1的时候跳转到下一个页面
解决
设置点击事件@click="details(item.name)"参数为name,令name值为分类1时跳转
details(name) {
const that = this;
if(name ==='分类1'){
that.$router.push('/classify')
}
}
到此跳转就完成啦