Vue——v-bind动态绑定class（对象语法）——2020.11.14

最新推荐文章于 2024-05-10 18:15:56 发布

Blockchain_KT

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量565

点赞数 2

分类专栏： Vue.js-实战开发文章标签： vue js html css

本文链接：https://blog.csdn.net/weixin_43402353/article/details/109691573

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

本文深入讲解了Vue.js中使用v-bind:class动态绑定class的多种方式，包括对象语法的直接绑定、条件判断绑定以及结合methods和computed属性的复杂用法。通过代码实战展示了如何根据条件切换元素的样式类，例如active、size和family。通过实例，读者可以更好地理解和应用v-bind:class进行动态样式管理。

摘要由CSDN通过智能技术生成

一丶v-bind绑定class

1.绑定方式：对象语法

对象语法的含义是：class后面跟的是一个对象

2.用法：

直接通过{ }绑定一个类

<h2 :class="{'active':isActive}">Hello Ting, I am Key!</h2>

通过判断，传入多个值

<h2 :class="{'active':isActive,'family':isFamily}">Hello Ting, I am Key!</h2>

和普通的类同时存在，并不冲突
注：如果isActive和isFamily都为true，那么会有size/active/family三个类

<h2 class="size" :class="{'active':isActive,'family':isFamily}">Hello Ting, I am Key!</h2>

如果过于复杂，可以放在一个methods或者computed中
住：classes是一个计算属性

<h2 class="size" :class="classes">Hello Ting, I am Key!</h2>

二丶代码实战

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/14 14:16-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color:red;
    }
    .size{
      font-size: 30px;
    }
    .family{
      font-family: 华文行楷;
    }
  </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
<!--  这样用，就是脱裤子放屁，多此一举-->
<!--  <h2 class="active">{{message}}</h2>-->
<!--  <h2 v-bind:class="active">{{message}} </h2>-->

<!--  一般是，这样用，控制可变class添加开关-->
<!--  <h2 v-bind:class="{key1:value1,key2:value2}">{{message}}</h2>-->
<!--  <h2 v-bind:class="{类名1:true,类名2:false}">{{message}}</h2>-->

<!--  下列代码，size固定绑定类，后面两个为动态绑定-->
<!--  <h2 class="size" v-bind:class="{active: isActive,family: isFamily}">{{message}}</h2>-->
  <h2 class="size" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClickActive">切换颜色</button>
  <button v-on:click="btnClickSize">切换字体风格</button>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello Ting,I am Key!",
      isActive:true,
      isFamily:false
    },
    methods: {
      btnClickActive:function(){
        this.isActive = !this.isActive
      },
      btnClickSize:function(){
        this.isFamily = !this.isFamily
      },
      getClasses:function (){
        return {active: this.isActive,family: this.isFamily}
      }
    }
  })
</script>
</body>
</html>