vue2.0 實現click點擊當前li，並動態添加class（這種方法不太喜歡）

1，文件內容

---- 使用v-for遍歷數據

---- @click="selectSort(item)"添加點擊事件，並把每個obj=item傳入

---- v-show="item.show"，在點擊事件中，實現點擊顯示或隱藏

---- :class="{'active':item.show===true}" 動態添加class，判斷當當前item顯示時，添加active這個class

 

<template>
　　<div class="Home">
　　　　<ul>
　　　　　　<li v-for="item in items" @click="selectSort(item)"  :class="{'active':item.show===true}">{{item.sort}} <span v-show="item.show">正確</span></li>
　　　　</ul>
　　/div>
</template>
<script>
　　export default{
　　　　data () {
　　　　　　return {
　　　　　　　　items: [
　　　　　　　　　　{sort: '綜合排序', show: false},
　　　　　　　　　　{sort: '最新發布', show: false},
　　　　　　　　　　{sort: '價格從低到高', show: false},
　　　　　　　　　　{sort: '價格從高到低', show: false}
　　　　　　　　]
　　　　　　};
　　　　},
　　　　methods: {
　　　　　　selectSort (item) {
　　　　　　　　item.show = !item.show;
　　　　　　}
　　　　}
　　}
</script>
<style>
　　ul li{
　　　　width:800px;
　　　　cursor: pointer;
　　　　list-style:none;
　　　　padding:10px;
　　　　border:1px solid #000;
　　}
　　ul li>span{
　　　　float:right;
　　　　color:#ff00ff;
　　}

　　ul li.active{
　　　　color:#ff00ff;
　　}

</style>

 

2，效果