var vm = new Vue({ el: '#app', data: { currentView: 'child1', active: '1', category: [{ category_id: "1", category_name: "Apple" }, { category_id: "2", category_name: "Xiaomi" }], products: [{ category_id: "1", goods_name: "iphone6s", }, { category_id: "1", goods_name: "macbook pro" }, { category_id: "2", goods_name: "hongmi5 Plus" }] }, computed: { categoryProducts() { let that = this return this.products.filter(p => p.category_id === that.active) } }, methods: { toggle(i, v) { this.active = i console.log(i) //this.currentView = v } } })
<div id="app"> <ul> <li @click="toggle(item.category_id,item.category_name)" v-for="item in category" :class="{active: active == item.category_id}">{{ item.category_name }}</li> </ul> <br> <div class="layui-tab-content"> <ul> <li v-for="item in categoryProducts"> {{item.goods_name}} </li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
.active { color: red; border-bottom: 1px solid red; } ul li { padding: 0 15px; float: left; list-style: none; }