解决Vue动态修改样式的一些bug

因为项目需要,最近在入门学习Vue,结果遇到了好多bug,下面先来分享我其中之一的修bug过程:
大致的功能就是动态点击li下的a标签之后一些样式的改变。

<div class="assort">
     <ul id="assort">
         <li v-for="(item,index) in classifyTxt">
              <a href="javascript:void (0);" v-on:click.stop.prevent="showData($event,index)"
:class="{ 'red-link':index === isActive }" v-text="item.text" ></a>
         </li>
     </ul>
</div>
<style type="text/css">
    .red-link{
        color: saddlebrown;
        background-color:gray;
    }
</style>
var vmm = new Vue({
   el: "#assort",
   data: {
      isActive:0,
      datas: s.data, //可以忽略
      classifyTxt: [
         {text: '全部'},
         {text: '励志'},
         {text: '言情'},
         {text: '文学'},
         {text: '悬疑'},
         {text: '历史'},
         {text: '军事'},
         {text: '其他'}
                    ]
         },
      methods: {
         showData: function ($event,index) {
         this.isActive = index;
         .....(还有其他我自己的代码这里可以忽略)

以上代码我单独放在一个jsp里可以运行出我想要的效果,可是在原本的项目里总是失效的,经过多次测试后,发现是我在css里对上面a标签样式设计有冲突。

.assort ul li a{
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
    color: black;  //就是这里出的问题,把这个删掉我的效果就好了
}

为了让我字体颜色和之前保持不变,我在外面单独设置了

a{color:black; }

我也是误打误撞修复了bug,但具体原因还是弄不明白,如果刚好你也懂,就请多多指教。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值