vue动态绑定Class样式

vue 专栏收录该内容
59 篇文章 0 订阅
  1. 三目元算符方式:
<!--vue代码-->
    <ul>
      <li v-for="item in itemData" :key="item">
        <i :class="item.isA ? 'class_a' : 'class_b'"></i> 
      </li>
    </ul>

 <!-- CSS代码 -->
  .class_a,.class_b{
    /*这里可以写一些公共样式*/
  }

  .class_a{
    /*这里写需要设置的第一种样式*/
  }

  .class_b{
    /*这里写需要设置的第二种样式*/
  }


  1. 基本绑定:
<!--vue代码-->
  <div :class="{class_a:isActive}"></div>

<!-- 博主在这里用vue-cli做例子,小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        isActive:true
      }
    }
  }

<!-- CSS代码 -->
  .class_a{
    /*这里写需要设置的样式*/
  }

或者

<block v-for="(item, index) in tab" :key="index">
					<view class="list-cont" @click="tabs(index,item.nav)" :class="{active:index==num}">
						<view>
							<text class="con-text-a">{{ item.name }}</text>
						</view>
						<view>
							<text class="con-text-b" :class="{activeb:index==num}">{{ item.title }}</text>
						</view>
					</view>
				</block>

在这里插入图片描述
3.对象绑定

<!--vue代码-->
    <div :class="classObject"></div>

<!-- 博主在这里用vue-cli做例子,小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        classObject:{
          class_a:true,
          class_b:true
        }
      }
    }
  }

<!-- CSS代码 -->
  .class_a{
    /*这里写需要设置的第一种样式*/
  }

  .class_b{
    /*这里写需要设置的第二种样式*/
  }

4.绑定返回对象的计算属性

<!--vue代码-->
    <div v-bind="classObject"></div>

<!-- 博主在这里用vue-cli做例子,小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        isActive:true
      }
    },
    computed:{
      classObject:function () {
        return{
          class_a:this.isActive,
          class_b:!this.isActive
        //  这里要结合自身项目情况修改填写
        }
      }
    }
  }

<!-- CSS代码 -->
  .class_a{
    /*这里写需要设置的第一种样式*/
  }

  .class_b{
    /*这里写需要设置的第二种样式*/
  }
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值