vue中动态绑定样式

最新推荐文章于 2025-06-11 20:06:40 发布

牧光者

最新推荐文章于 2025-06-11 20:06:40 发布

阅读量892

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/weixin_54494182/article/details/131158052

本文深入探讨Vue.js中如何使用v-bind指令动态绑定CSS样式，包括类名和内联样式。通过实例解析，展示了如何根据条件、计算属性和数据变化来实现组件样式的动态更新，提升前端开发的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<body>
  <div id="root">
    方法一:
    <p :class="{active:isactive}" @click="handleChangeColorOne">{{message}}</p>
    方法二:
    <p :class="['color-gray',actived]" @click="handleChangeColorTwo">{{message}}</p>
    方法三:
    <p :style="colorObj1" @click="handleChangeColorThree">{{message}}</p>
    方法四:
    <p :style="[colorObj2,{fontSize:'28px'}]" @click="handleChangeColorFour">{{message}}</p>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#root',
    data: {
      message: 'hello wrold',
      isactive: false,
      actived: '',
      colorObj1: {
        color: 'pink'
      },
      colorObj2: {
        color: 'green'
      }
    },
    methods: {
      // 点击切换颜色
      handleChangeColorOne() {
        this.isactive = this.isactive ? false : true
      },
      handleChangeColorTwo() {
        this.actived = this.actived == 'active' ? '' : 'active'
      },
      handleChangeColorThree() {
        this.colorObj1.color = this.colorObj1.color == 'pink' ? '' : 'pink'
      },
      handleChangeColorFour() {
        this.colorObj2.color = this.colorObj2.color == 'green' ? '' : 'green'
      }
    }
  })
</script>
<style>
  p {
    /* 默认颜色 */
    color: rgb(0, 255, 94);
  }

  .color-gray {
    color: gray;
  }

  .active {
    color: #f00;
  }
</style>