标签:compute input ret 不重复 sso bug 情况 有一个 default
是这样的情况:
我知道,在vue里,实现点击高亮,可以使用诸如:
<div class="static" v-bind:class="{defaultClass ,active: isActive}"> </div>
或
<div class="static" v-bind:class="[defaultClass,{active:index==choosedIndex}]"></div>
或
<div v-bind:class="classObject"></div> data: { defaultClass, isActive: true }, computed: { classObject: function () { return { active: this.isActive } } }
曾经都是用jquery操作dom去实现的。但是vue里,我想尽量不去操作dom,而是去操作数据的传递。
如何实现,选择颜色的时候,只有一个颜色是选中状态。选中尺码的时候,颜色依然保持选中状态的。反之,亦然。
正文开始:(Bug在这里)话不多说,直接撸代码
<div class="hi-text"> <div>商品属性</div> <ul> <li v-for="(item, index) in goodsNames" :key="index" :class="navIndex===index?‘active‘:‘‘" @click="inputFillEvent(index, item, $event)">{{ item }} </li> </ul> </div> </div>
本来直接绑定了样式 :class="navIndex===index?‘active‘:‘‘" 可以直接改变选中li样式,
但是因为下面的div省事儿 也命名为hi-text控制样式,一点击页面,li选中样式就失效;
解决办法:单独命名div盒子 不重复命名
标签:compute input ret 不重复 sso bug 情况 有一个 default
原文地址:https://www.cnblogs.com/myfate/p/11419098.html