vue动态绑定class的3种方式对象语法和数组语法

最新推荐文章于 2025-06-11 19:50:48 发布

转载最新推荐文章于 2025-06-11 19:50:48 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhtian/p/10053886.html

文章标签：

#javascript #ViewUI

本文详细介绍了在Vue.js中动态绑定class和内联样式的三种方法：对象语法、数组语法及绑定行内样式。通过实例展示了如何使用计算属性实现条件绑定，使样式根据数据变化而变化。

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

动态绑定class的几种方式

1.对象语法行内或计算属性

<style>
    .static {
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    .orange {
      border: 1px solid orange;
    }
  </style>
</head>
<body>
  <!-- 对象语法 -->
  <!-- <div id="example" class="static" v-bind:class="{'orange': isRipe, 'green': isNotRipe}"></div> -->
  <div id="example" class="static" v-bind:class="haha"></div>
</body>

  // 01class绑定方法1对象语法
  var vm = new Vue({
    el: "#example",
    data: {
      //   isRipe: true,
      //   isNotRipe: false
      age: 4,
      member: 999
    },
    computed: {
      haha: function() {
        return {
          'orange': this.age > 3 ? true : false,
          'green': this.member > 1000 ? true : false
        }
      }
    }
  })

方法2数组语法

 // 数组语法 
  <div id="example" class="static" v-bind:class="[class1, class2]"></div>
  var vm = new Vue({
    el: "#example",
    data: {
      class1: 'orange',
      class2: 'green'
    }
  })

方法3绑定行内样式

  <!-- 对象语法 -->
  // <div id="app" v-bind:style="{color: color, fontSize: fontSize+'px' }">hello world</div> -->
 // <div id="app" v-bind:style="style">hello world</div>
  <div id="app" v-bind:style="haha">hello world</div>
    var vm = new Vue({
      el: '#app',
      data: {
        // color: 'pink',
        // fontSize: 30
        // style: {
        //   color: 'pink',
        //   fontSize: '30px'
        // }
        age: 4,
        member: 9000
      },
      computed: {
        haha : function() {
          return {
            color: this.age >3 ? orange: green,
            fontSize: this.member> 1000 ? '30px' :'10px'
          }
        }
      }
    })

转载于:https://www.cnblogs.com/zhtian/p/10053886.html