9種方法介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8.使用計(jì)算屬性動(dòng)態(tài)綁定style屬性：

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

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

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

具體實(shí)現(xiàn)

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

1.使用v-bind指令（或簡寫為:class和:style）來動(dòng)態(tài)綁定class和style屬性。可以通過計(jì)算屬性或直接在模板中使用三元表達(dá)式來根據(jù)條件動(dòng)態(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）來動(dòng)態(tài)綁定class和style對象?？梢栽赿ata中定義一個(gè)對象，根據(jù)條件動(dòng)態(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.使用計(jì)算屬性來動(dòng)態(tài)生成class和style對象。可以根據(jù)組件的data或props屬性計(jì)算出class和style對象，并在模板中使用計(jì)算屬性。

<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.使用動(dòng)態(tài)綁定的class和style屬性，通過在模板中使用表達(dá)式來動(dòng)態(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ù)組語法來動(dòng)態(tài)綁定class屬性?？梢栽赿ata中定義一個(gè)數(shù)組，根據(jù)條件動(dòng)態(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.使用動(dòng)態(tài)綁定的style屬性，通過在模板中使用對象語法來動(dòng)態(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.使用對象語法動(dòng)態(tài)綁定class屬性?？梢栽赿ata中定義一個(gè)對象，根據(jù)條件動(dòng)態(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.使用計(jì)算屬性動(dòng)態(tài)綁定style屬性?？梢愿鶕?jù)組件的data或props屬性計(jì)算出style字符串，并在模板中使用計(jì)算屬性。

<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.使用動(dòng)態(tài)綁定的class和style屬性，通過在模板中使用數(shù)組和對象語法來動(dòng)態(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中動(dòng)態(tài)添加綁定style、class 9種方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)uniapp動(dòng)態(tài)綁定style、class內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論