v-bind指令之动态绑定class

最新推荐文章于 2022-03-06 20:15:19 发布

亮晶晶_

最新推荐文章于 2022-03-06 20:15:19 发布

阅读量507

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42146583/article/details/107121310

版权

为什么我们需要动态的绑定class？因为很多时候，我们希望动态的切换class。

我们想实现这样的功能：

一行文字，一个按钮，我们希望点击一下按钮，字体显示红色，再点击一下按钮，字体显示为黑色。

这个时候使用v-bind动态绑定class实现起来会非常的方便，思想：当点击按钮时，class生效，再点击一下按钮，让class失效。

实现代码为：

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


<div id="app">
  <h2 v-bind:class="{active:isActive}">{{message}}</h2>
  <button v-on:click="change">点击切换样式</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive:true
    },
    methods:{
      change(){
        this.isActive=!this.isActive
      }
    }
  })
</script>

v-bind:class="{active:isActive}"。让v-bind绑定类active，active可以让文字显示红色；
isActive:true。在data中定义isActive，初始值为true，表示类active生效；
v-on:click=“change”。为按钮绑定点击事件，当点击时，isActive修改值，取反；
v-bind的语法格式为：（其中value1、value2都可以通过定义变量来动态更改）
```
v-bind:class="{key1: value1, key2: value2}
```