vue日记之v-bind动态绑定class（对象语法1）

最新推荐文章于 2024-07-06 21:38:14 发布

小白白中之白

最新推荐文章于 2024-07-06 21:38:14 发布

阅读量109

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/m0_53438035/article/details/117451500

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .a{
        background-color: yellow;
    }
    .b{
        color:red;
    }
  </style>
</head>
<body>
<div id="eg">
  <p :class="{a :isa,b: isb}">{{message}}</p>
  <button v-on:click="change">按钮</button>
</div>


<script src="vue.js"></script>
<script>
  let eg = new Vue({
    el: "#eg",
    data: {
      isa: true,
      isb: true,
      message: "大灭迹"
    },
    methods: {
      change:function(){
        this.isa =!this.isa
        this.isb =!this.isb
      }

    }
  })
</script>
</body>
</html>

效果：
在这里插入图片描述
注意：
1.动态绑定中class的值为对象的形式，并且不会将原类名覆盖掉
2.chang函数无小括号是已经被省略

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小白白中之白

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue日记之v-bind动态绑定class（对象语法1）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .a{ background-color: yellow; } .b{ color:red; } </style></head><
复制链接

扫一扫