Vue动态绑定类名的几种方式

代码钢琴家
260 阅读2分钟

在项目开发中,我们通常需要动态绑定类名对样式进行渲染，所以这次我为大家带来了此次教学

1.通过数组的形式,对其进行动态绑定

<div class="Top">
  <h3>Top榜单</h3>
    <ul>
      <li v-for="item in List" :class="['isActive']" :key="item.id" >{{item.name}}</li>
    </ul>
</div>

export default {
  data() {
    return {
      List:[
        {id:1,name:'暗号'},
        {id:2,name:'七里香'},
        {id:3,name:'半岛铁盒'},
        {id:4,name:'爱在西元前'},
        {id:5,name:'白色风车'},
        {id:6,name:'退后'},
        {id:7,name:'止战之殇'},
        {id:8,name:'黑色幽默'}
      ],
      num:1,
      isActive:true,
    };
  },
};

<style scoped>
*{
  padding: 0px;
  margin: 0;
}
.Top{
  width: 100px;
  height: 274px;
  position: absolute;
  /* top:50%; */
  left: 50%;
  /* margin-top:-50px; */
  margin-left:-137px;
}

ul{
  list-style-type: none;
  margin: 0 auto;
}
ul li{
  margin: 10px 0px;
  cursor: pointer;
}

.isActive{
  color: red;
}
</style>

运行代码：

image.png

当绑定的值为true的时候类名则添加了上去，用该类方法可以添加多个类名，写法也是一样的。我们再添加一个FontSize的类名

  <div class="Top">
  <h3>Top榜单</h3>
    <ul>
      <li v-for="item in List" :class="['isActive','FontSize']" :key="item.id" >{{item.name}}</li>
    </ul>
</div>

export default {
  data() {
    return {
      List:[
        {id:1,name:'暗号'},
        {id:2,name:'七里香'},
        {id:3,name:'半岛铁盒'},
        {id:4,name:'爱在西元前'},
        {id:5,name:'白色风车'},
        {id:6,name:'退后'},
        {id:7,name:'止战之殇'},
        {id:8,name:'黑色幽默'}
      ],
      isActive:true,
      FontSize:true
    };
  },
};

<style scoped>
*{
  padding: 0px;
  margin: 0;
}
.Top{
  width: 100px;
  height: 274px;
  position: absolute;
  /* top:50%; */
  left: 50%;
  /* margin-top:-50px; */
  margin-left:-137px;
}

ul{
  list-style-type: none;
  margin: 0 auto;
}
ul li{
  margin: 10px 0px;
  cursor: pointer;
}

.isActive{
  color: red;
}

.FontSize{
  font-size: 20px;
}
</style>

image.png

2.通过对象的方式动态绑定

<div class="Top">
  <h3>Top榜单</h3>
    <ul>
      <li v-for="item in List" :class="{isActive:isActive}" :key="item.id" >{{item.name}}</li>
    </ul>
</div>

export default {
  data() {
    return {
      List:[
        {id:1,name:'暗号'},
        {id:2,name:'七里香'},
        {id:3,name:'半岛铁盒'},
        {id:4,name:'爱在西元前'},
        {id:5,name:'白色风车'},
        {id:6,name:'退后'},
        {id:7,name:'止战之殇'},
        {id:8,name:'黑色幽默'}
      ],
      isActive:true
    };
  },
};

<style scoped>
*{
  padding: 0px;
  margin: 0;
}
.Top{
  width: 100px;
  height: 274px;
  position: absolute;
  /* top:50%; */
  left: 50%;
  /* margin-top:-50px; */
  margin-left:-137px;
}

ul{
  list-style-type: none;
  margin: 0 auto;
}
ul li{
  margin: 10px 0px;
  cursor: pointer;
}

.isActive{
  color: red;
}
</style>

运行代码：

image.png

再实际开发中动态添加类名用的较多的是通过绑定点击事件对该标签进行样式的添加

<div class="Top">
    <h3>Top榜单</h3>
    <ul>
      <li v-for="item in List" :class="{active:num === item.id}" :key="item.id" @click="clickList(item.id)">{{item.name}}</li>
    </ul>
</div>

<script>
export default {
  name: 'StudyApp',

  data() {
    return {
      List:[
        {id:1,name:'暗号'},
        {id:2,name:'七里香'},
        {id:3,name:'半岛铁盒'},
        {id:4,name:'爱在西元前'},
        {id:5,name:'白色风车'},
        {id:6,name:'退后'},
        {id:7,name:'止战之殇'},
        {id:8,name:'爱在西元前'}
      ],
      num:1,
      isActive:true,
      FontSize:false,
      FontWeight:true
    };
  },

  mounted() {
    
  },

  methods: {
    clickList(id){
      this.num = id
    }
  },
};
</script>

<style scoped>
*{
  padding: 0px;
  margin: 0;
}
.Top{
  width: 100px;
  height: 274px;
  position: absolute;
  /* top:50%; */
  left: 50%;
  /* margin-top:-50px; */
  margin-left:-137px;
}

ul{
  list-style-type: none;
  margin: 0 auto;
}
ul li{
  margin: 10px 0px;
  cursor: pointer;
}
.active{
  color:red
}
.isActive{
  color: red;
}
.FontSize{
  font-size: 20px;
}
</style>

代码运行：

image.png

通过这样的方式也可以添加多个类名

<template>
  <!-- 第一种绑定形式 -->
  <div class="Top">
    <h3>Top榜单</h3>
    <ul>
      <li v-for="item in List" :class="{active:num === item.id,FontSize:num === item.id}" :key="item.id" @click="clickList(item.id)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'StudyApp',

  data() {
    return {
      List:[
        {id:1,name:'暗号'},
        {id:2,name:'七里香'},
        {id:3,name:'半岛铁盒'},
        {id:4,name:'爱在西元前'},
        {id:5,name:'白色风车'},
        {id:6,name:'退后'},
        {id:7,name:'止战之殇'},
        {id:8,name:'爱在西元前'}
      ],
      num:1,
    };
  },

  mounted() {
    
  },

  methods: {
    clickList(id){
      this.num = id
    }
  },
};
</script>

<style scoped>
*{
  padding: 0px;
  margin: 0;
}
.Top{
  width: 100px;
  height: 274px;
  position: absolute;
  left: 50%;
  margin-left:-137px;
}

ul{
  list-style-type: none;
  margin: 0 auto;
}
ul li{
  margin: 10px 0px;
  cursor: pointer;
}
.active{
  color:red
}
.isActive{
  color: red;
}
.FontSize{
  font-size: 20px;
}
</style>

image.png

3.还可以通过绑定三元运算符的方式对其进行动态添加

<template>
<!-- 第一种绑定形式 -->
<div class="Top">
  <h3>Top榜单</h3>
    <ul>
      <li v-for="item in List" :class="[isActive?'isActive':'isFontSize']" :key="item.id" >{{item.name}}</li>
    </ul>
</div>
</template>

<script>
export default {
  name: 'StudyApp',

  data() {
    return {
      List:[
        {id:1,name:'暗号'},
        {id:2,name:'七里香'},
        {id:3,name:'半岛铁盒'},
        {id:4,name:'爱在西元前'},
        {id:5,name:'白色风车'},
        {id:6,name:'退后'},
        {id:7,name:'止战之殇'},
        {id:8,name:'爱在西元前'}
      ],
      isActive:false,
      isFontSize:true,
    };
  },

  mounted() {
    
  },

  methods: {

  },
};
</script>

<style scoped>
*{
  padding: 0px;
  margin: 0;
}
.Top{
  width: 150px;
  height: 274px;
  position: absolute;
  left: 50%;
  margin-left:-137px;
}

ul{
  list-style-type: none;
  margin: 0 auto;
}
ul li{
  margin: 10px 0px;
  cursor: pointer;
}
.isActive{
  color: red;
}
.isFontSize{
  font-size: 25px;
}
</style>

运行代码：

image.png

动态添加类名的方式还有很多种，比如通过计算属性的方式、在组件上class绑定在子组件的根元素上等等。其实方法都大同小异。

avatar
文章
阅读
粉丝