vue做商品选择如何保持样式

Posted 时来の运转

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue做商品选择如何保持样式相关的知识,希望对你有一定的参考价值。

是这样的情况:
我知道,在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盒子 不重复命名

以上是关于vue做商品选择如何保持样式的主要内容,如果未能解决你的问题,请参考以下文章

完成后台管理系统功能添加商品中的商品类目的展示

Android 日期选择器片段更改为微调器

如何在 Vue2 中的 Sass 后缀 (&__) 选择器上实现 ::v-deep?

如何在 Vs Code 中更改默认自动选择的用户片段行为

PyQt5 QTableView:如何在保持默认样式/颜色的同时禁用用户交互/选择?

Vue2 商城商品详情页颜色尺码面料选择功能