vue09-class对象样式绑定

淩亂°似流年 2022-05-10 00:10 205阅读 0赞

首先看代码

  1. <!DOCTYPE html>
  2. <html lang=en>
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>Hello world</title>
  7.     <script src="vue.js"></script>
  8.     <style>
  9.         .activated {
  10.             color: red;
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <div id="root">
  17.         <!-- class对象绑定  -->
  18.         <div @click="handleDivClick" :class="{activated: isActivated}">HelloWorld</div>
  20.     </div>
  23.     <script>
  24.         var vm = new Vue({
  25.             el: "#root",
  26.             data: {
  27.                 isActivated: false
  28.             },
  29.             methods: {
  30.                 handleDivClick: function () {
  31.                     this.isActivated = !this.isActivated;
  32.                 }
  33.             }
  34.         })
  36.     </script>
  37. </body>
  39. </html>

当isActivated属性为ture时，class与样式activated绑定，当为false时，不绑定。

click事件为切换绑定与不绑定

发表评论

表情：
评论列表 （有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

    相关 VUE 样式绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

    蔚落蔚落/ 0 赞/ 456 阅读