vue的动态样式绑定class与style

最新推荐文章于 2024-08-04 21:39:31 发布

橘子味的香蕉

最新推荐文章于 2024-08-04 21:39:31 发布

阅读量248

点赞数

分类专栏：前端文章标签： vue.js 前端样式绑定动态class

本文链接：https://blog.youkuaiyun.com/weixin_44706267/article/details/122056331

版权

前端专栏收录该内容

10 篇文章

订阅专栏

class属性绑定

v-bind:class 设置为对象

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

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	hasError: true
  }
})
</script>

运行后，以上div class变成

<div class="static active text-danger"></div>

v-bind:class 直接绑定数据里的一个对象

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

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>

运行后，以上div class变成

<div class="active text-danger"></div>

v-bind:class 绑定计算属性

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

new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
        base: true,
        active: this.isActive,
        'text-danger': this.error.value && this.error.type === 'aaa',
      }
    }
  }
})
</script>

运行后，以上div class变成

<div class="base active"></div>

v-bind:class 绑定数组

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

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

运行后，以上div class变成

<div class="active text-danger"></div>

v-bind:class 绑定三元表达式

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

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

运行后，以上div class变成

<div class="active text-danger"></div>

style属性绑定（内联样式）

以下实例 div style 为：

<div style="color: green; font-size: 30px;">菜鸟教程</div>

v-bind:style 绑定对象

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

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30
  }
})
</script>

v-bind:style 绑定数据里的样式对象

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

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

v-bind:style 绑定数组

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

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