vue 在同一个标签中根据不同条件绑定不同的class 的写法。。动态绑定class

Posted 2023-05-12

参考技术A 渲染结果： 当条件1成立时，html 元素会被赋予 classname1的样式；当条件2成立时，html元素会被赋予 classname2 的样式；当两个条件均成立时，则 classname1样式和 classname2样式均会被附上；

附上项目：

定制的公共 template 模板

样式 ：写在公共模板中~~

在其他组件中调用

效果图：

1.动态绑定class

  1.1        :class="active:activeIndex==0"     active是类名，当activeIndex==0为true时，active起作用。

                  

1.2  三目写法 ： :class="[active==1?'样式1':'样式2']"

Vue中切换标签对应不同的页面写法，其实就是绑定class

 <div class=‘niubi‘>
        <p :class="active===index ? ‘isActive‘ : ‘‘" @click="bb(index)" v-for="(item,index) in arrow" :key="index">
            item.name
        </p>
    </div>

arrow:[
        
          name:‘大哥‘
        ,
        
          name:‘小弟‘
        ,
        
          name:‘第中弟‘
        
      ],
 active:0

方法：

bb(index)

 this.active=index

,

 

样式自己去写