Vue動態添加樣式

一、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/zh-tw/n/137301.html