vue样式绑定

最新推荐文章于 2025-02-17 15:12:51 发布

转载最新推荐文章于 2025-02-17 15:12:51 发布 · 441 阅读

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在 Vue.js 中使用 v-bind:class 和 v-bind:style 实现元素样式的动态绑定。通过实例展示了如何根据数据变化切换 CSS 类和内联样式，包括条件绑定和对象语法的应用。

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

<div v-bind:class="{ active: isActive }"></div>

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

<div id="app">
  <div v-bind:class="classObject"></div>
</div>

new Vue({
  el: '#app',
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
  }
})

<div v-bind:class="[activeClass, errorClass]"></div>

errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<div id="app">
<div v-bind:style="styleObject">菜鸟教程</div>
</div>

<script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px'
}
}
})

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>


<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>