Vue动态添加样式

NKOU • 2024-10-04 00:17 • 编程

一、Vue动态添加激活样式

在Vue中，我们可以使用v-bind:class指令动态添加类名，实现激活状态的显示。

  
    动态添加激活样式
  
  
    data () {
      return {
        isActive: true
      }
    }

在这个例子中，我们使用v-bind:class指令绑定了一个对象，对象中的键名是类名，键值是一个布尔类型的变量isActive。当isActive为true时，类名为active的样式将会被添加到这个元素上。

二、Vue如何动态添加样式

在Vue中，我们还可以使用内联样式、计算属性、动态绑定等方式来实现动态添加样式。

1. 内联样式

  
    动态添加内联样式
  
  
    data () {
      return {
        activeColor: 'red',
        fontSize: 16
      }
    }

在这个例子中，我们使用v-bind:style指令绑定了一个对象，对象中的键名是css属性名，键值是一个Vue数据变量。这样我们就可以在Vue实例中动态改变样式。

2. 计算属性

  
    动态添加计算属性样式
  
  
    data () {
      return {
        list: [1, 2, 3, 4, 5],
        activeIndex: 3
      }
    },
    computed: {
      oddColor () {
        return this.activeIndex % 2 === 0 ? 'red' : 'blue'
      }
    }

在这个例子中，通过计算属性oddColor来动态添加样式。当activeIndex为偶数时，background将会变成红色，否则为蓝色。

3. 动态绑定

  
    动态绑定样式
  
  
    data () {
      return {
        isActive: true,
        className: 'font-bold'
      }
    }

在这个例子中，我们使用:class绑定了一个数组。数组的第一个元素是一个对象，当isActive为true时，active类名将会被添加到这个元素上。数组的第二个元素是一个变量className，它是一个字体加粗的类名。

三、Vue添加动态检验

在Vue中，我们可以使用v-bind:style和:class等指令动态添加样式。但是，有些情况下我们并不想任意添加样式，需要加入判断条件来限制。

1. 判断类名

  
    判断类名的动态添加样式
  
  
    data () {
      return {
        isActive: true,
        isBold: false
      }
    }

在这个例子中，我们使用:class指令绑定了一个数组，数组中有两个对象。第一个对象只会在isActive为true时添加active的类名。第二个对象只会在isBold为true时添加font-bold的类名。

2. 判断样式

  
    判断样式的动态添加样式
  
  
    data () {
      return {
        isSmall: false
      }
    }

在这个例子中，我们使用v-bind:style指令绑定了一个三目运算符，根据isSmall的值来判断添加的样式。如果isSmall为true，fontSize将会变成16px，否则为20px。

四、Vue动态添加组件

在Vue中，我们可以使用v-if和v-for等指令来动态添加组件。其中，v-if用于根据条件控制组件是否显示，v-for用于循环生成组件。

1. v-if

  
        
动态添加组件v-if
                                                        原创文章，作者：NKOU，如若转载，请注明出处：https://www.506064.com/n/137301.html