9種方法介紹

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

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

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

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

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

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

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

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

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

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

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

• 使用場(chǎng)景：當(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.使用對(duì)象語(yǔ)法動(dòng)態(tài)綁定class屬性：

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

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

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

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

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

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

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

1.使用v-bind指令（或簡(jiǎn)寫為:class和:style）來(lái)動(dòng)態(tài)綁定class和style屬性?？梢酝ㄟ^(guò)計(jì)算屬性或直接在模板中使用三元表達(dá)式來(lái)根據(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指令（或簡(jiǎn)寫為:class和:style）來(lái)動(dòng)態(tài)綁定class和style對(duì)象。可以在data中定義一個(gè)對(duì)象，根據(jù)條件動(dòng)態(tài)設(shè)置class和style對(duì)象的屬性。

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

<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屬性，通過(guò)在模板中使用數(shù)組和對(duì)象語(yǔ)法來(lái)動(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論