Vue.js

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

2021-09-10 13:46发布

站内文章 / Vue.js
871 0 0

一丶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="{'active':isActive,'family':isFamily}">Hello Ting, I am Key!</h2>

如果过于复杂，可以放在一个methods或者computed中

住：classes是一个计算属性

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


二丶代码实战


<!DOCTYPE html>

<html>

<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">

<!--  一般是，这样用，控制可变class添加开关-->

<!--  <h2 v-bind:class="{key1:value1,key2:value2}">{{message}}</h2>-->

<!--  <h2 v-bind:class="{类名1:true,类名2:false}">{{message}}</h2>-->


<!--  下列代码，size固定绑定类，后面两个为动态绑定-->

<!--  <h2 v-bind:class="{active: isActive,family: isFamily}">{{message}}</h2>-->

  <h2 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>


三丶运行结果

在这里插入图片描述