vue、uniapp中動態(tài)添加綁定style、class?9種實現(xiàn)方法

更新時間：2023年09月02日 10:34:58 作者：一花一world

這篇文章主要介紹了vue、uniapp中動態(tài)添加綁定style、class?9種方法實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

9種方法介紹

1.直接使用靜態(tài)class和style屬性：

使用場景：當class和style屬性是固定不變的時候，可以直接在模板中寫死。
優(yōu)點：簡單直接，沒有額外的計算和邏輯。
缺點：無法根據(jù)條件動態(tài)修改class和style。

2.使用v-bind動態(tài)綁定class和style屬性：

使用場景：當class和style屬性需要根據(jù)組件的data或props屬性動態(tài)變化時，可以使用v-bind來動態(tài)綁定。
優(yōu)點：可以根據(jù)條件動態(tài)修改class和style。
缺點：需要在模板中寫表達式，有一定的復(fù)雜度。

3.使用計算屬性來動態(tài)生成class和style對象：

使用場景：當class和style屬性的計算邏輯比較復(fù)雜時，可以使用計算屬性來生成class和style對象。
優(yōu)點：代碼可讀性好，邏輯清晰。
缺點：需要定義額外的計算屬性。

4.使用動態(tài)綁定的class和style屬性：

使用場景：當class和style屬性的計算邏輯比較簡單時，可以直接在模板中使用表達式來動態(tài)生成class和style字符串。
優(yōu)點：簡潔明了，沒有額外的計算屬性。
缺點：邏輯稍微復(fù)雜時，可讀性會變差。

5.使用數(shù)組語法來動態(tài)綁定class屬性：

使用場景：當class屬性需要根據(jù)多個條件動態(tài)變化時，可以使用數(shù)組語法來動態(tài)綁定class屬性。
優(yōu)點：可以根據(jù)多個條件動態(tài)修改class。
缺點：數(shù)組語法相對復(fù)雜，可讀性較差。

6.使用動態(tài)綁定的style屬性：

使用場景：當style屬性需要根據(jù)組件的data或props屬性動態(tài)變化時，可以使用動態(tài)綁定的style屬性。
優(yōu)點：可以根據(jù)條件動態(tài)修改style。
缺點：需要在模板中寫表達式，有一定的復(fù)雜度。

7.使用對象語法動態(tài)綁定class屬性：

使用場景：當class屬性需要根據(jù)多個條件動態(tài)變化時，可以使用對象語法來動態(tài)綁定class屬性。
優(yōu)點：可以根據(jù)多個條件動態(tài)修改class。
缺點：對象語法相對復(fù)雜，可讀性較差。

8.使用計算屬性動態(tài)綁定style屬性：

使用場景：當style屬性的計算邏輯比較復(fù)雜時，可以使用計算屬性來動態(tài)綁定style屬性。
優(yōu)點：代碼可讀性好，邏輯清晰。
缺點：需要定義額外的計算屬性。

9.使用動態(tài)綁定的class和style屬性，通過在模板中使用數(shù)組和對象語法來動態(tài)生成class和style字符串：

使用場景：當class和style屬性需要根據(jù)多個條件動態(tài)變化時，可以使用數(shù)組和對象語法來動態(tài)綁定class和style屬性。
優(yōu)點：可以根據(jù)多個條件動態(tài)修改class和style。
缺點：語法相對復(fù)雜，可讀性較差。

具體實現(xiàn)

在Uniapp和Vue中，可以使用以下9種方法來動態(tài)添加綁定style和class：

1.使用v-bind指令（或簡寫為:class和:style）來動態(tài)綁定class和style屬性。可以通過計算屬性或直接在模板中使用三元表達式來根據(jù)條件動態(tài)設(shè)置class和style屬性。

<template>
  <div :class="{'active': isActive}" :style="{'color': textColor}">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>

2.使用v-bind指令（或簡寫為:class和:style）來動態(tài)綁定class和style對象。可以在data中定義一個對象，根據(jù)條件動態(tài)設(shè)置class和style對象的屬性。

<template>
  <div :class="classObject" :style="styleObject">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      classObject: {
        active: true,
        'text-color': true
      },
      styleObject: {
        color: 'red',
        fontSize: '16px'
      }
    }
  }
}
</script>

3.使用計算屬性來動態(tài)生成class和style對象?？梢愿鶕?jù)組件的data或props屬性計算出class和style對象，并在模板中使用計算屬性。

<template>
  <div :class="computedClass" :style="computedStyle">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  },
  computed: {
    computedClass() {
      return {
        active: this.isActive,
        'text-color': this.textColor === 'red'
      }
    },
    computedStyle() {
      return {
        color: this.textColor,
        fontSize: '16px'
      }
    }
  }
}
</script>

4.使用動態(tài)綁定的class和style屬性，通過在模板中使用表達式來動態(tài)生成class和style字符串。

<template>
  <div :class="'active ' + (isActive ? 'active' : '')" :style="'color: ' + textColor">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>

5.使用數(shù)組語法來動態(tài)綁定class屬性?？梢栽赿ata中定義一個數(shù)組，根據(jù)條件動態(tài)設(shè)置class數(shù)組的元素。

<template>
  <div :class="classArray">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      isBold: true
    }
  },
  computed: {
    classArray() {
      return ['active', {'bold': this.isBold}]
    }
  }
}
</script>

6.使用動態(tài)綁定的style屬性，通過在模板中使用對象語法來動態(tài)生成style字符串。

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>

7.使用對象語法動態(tài)綁定class屬性?？梢栽赿ata中定義一個對象，根據(jù)條件動態(tài)設(shè)置class對象的屬性。

<template>
  <div :class="classObject">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      isBold: true
    }
  },
  computed: {
    classObject() {
      return {
        active: this.isActive,
        bold: this.isBold
      }
    }
  }
}
</script>

8.使用計算屬性動態(tài)綁定style屬性?？梢愿鶕?jù)組件的data或props屬性計算出style字符串，并在模板中使用計算屬性。

<template>
  <div :style="computedStyle">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  },
  computed: {
    computedStyle() {
      return `color: ${this.textColor}; font-size: ${this.fontSize}px;`;
    }
  }
}
</script>

9.使用動態(tài)綁定的class和style屬性，通過在模板中使用數(shù)組和對象語法來動態(tài)生成class和style字符串。

<template>
  <div :class="['active', { 'bold': isBold }]">Hello World</div>
  <div :style="[styleObject, { 'font-size': fontSize + 'px' }]">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      isBold: true,
      styleObject: {
        color: 'red'
      },
      fontSize: 16
    }
  }
}
</script>

到此這篇關(guān)于vue、uniapp中動態(tài)添加綁定style、class 9種方法實現(xiàn)的文章就介紹到這了,更多相關(guān)uniapp動態(tài)綁定style、class內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: