想給兩個Ul中的li都添加一個點擊添加class的功能，現(xiàn)在的代碼點擊一個ul中的li,添加了屬性，但是另一個ul中相同下標的li也添加了該屬性，請問應該怎么寫讓兩個ul互不影響呢
代碼如下：
html:

        <div v-for="items in goodsstandardele">
            <div v-if="items.standarddata[0].url==''" class="species">
                <h5>{{items.standardlabel}}</h5>
                <p>
                    <span @click="color($index)" :class="{colorDorderRed: $index==colorred}" v-for="(gd,$index) in items.standarddata">{{gd.desc}}</span>
                </p>
            </div>
            <div v-else class="goods-color">
                <h5>{{items.standardlabel}}</h5>
                <ul>
                    <li @click="color($index)" v-for="(gd,$index) in items.standarddata">
                        <img :class="{colorDorderRed: $index==colorred}" :src="gd.url" alt="">
                        <p>{{gd.desc}}</p>
                    </li>
                </ul>
            </div>
        </div>

js代碼：

        color(index){
            this.colorred = index;
          }

效果是下面這樣的：

現(xiàn)在點擊白色就跳到10，藍色就是5，不能交叉選擇……剛開始學習不太懂，希望大神們幫幫忙，謝謝！