vue.js 给一组li中的某一个添加class

Question

一组li，这个li不是v-for出来的。是直接写死的。为什么不用v-for，li里面的结构不一样，
给所有的li添加点击事件 tanchu（），给点击的当前li添加一个class；
现在点击之后所有的都会添加这个class；

这个问题应该怎么去思考？
vue是操作数据的，怎么用数据驱动取取操作

Answer 1

这个是你的设计问题，你可以设置一个变量 type ，然后写成:class="{margin_bottom:type='a'}"、:class="{margin_bottom:type='b'}"等等，然后click的时候，test方法传入对应的 a、b、c、d，test方法将type赋值成对应传入的a、b、c、d,大概的代码

<li @click="test('a')" :class="{margin_bottom:type=='a'}">1</li>

methods:{
    test:function(type){
        this.type = type;
    }
}

Answer 2

没太理解你什么意思,不过既然你是写死的,你就不能在点击事件里传不同的参数吗
data里加个标识 _checked
test 里面对 _checked赋值 _checked = cans
html class里面这么写 margin_bottom: productSection.section2 && _checked === 各个li的标识

Answer 3

你可以把每个 li 标签需要的东西都写到一个对象中,由这些对象组成数组

<div id="demo">

    <ul>
        <li v-for="(item,index) in your_list" @click="alert(index)" :class="item.clas">
            {{ item.content }}
        </li>
    </ul>
</div>
<script>
var app = new Vue({
        el: "#demo",
        data: {
             your_list: [
                {content:"列表1",clas:"test1"},
                {content:"列表2"},
                {content:"列表3",clas:"test3"}
            ]
        }
    });
</script>

循环出来的数据都是有索引的,根据索引去数组里面查再进行想要的处理啊
如果还不满足就使用一下 v-if v-else这类的判断语句