快捷導(dǎo)航

Vue動(dòng)態(tài)樣式幾種常用方法總結(jié)

更新時(shí)間：2023年08月04日 10:07:47 作者：姜姜思密達(dá)

這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式幾種常用方法總結(jié)的相關(guān)資料,在我們的前端界面中,很多的地方的樣式都是不確定的狀態(tài),要根據(jù)其他內(nèi)容的變化而變化樣式的,需要的朋友可以參考下

1、對(duì)象語(yǔ)法：

可以通過(guò)在模板中綁定一個(gè)對(duì)象來(lái)動(dòng)態(tài)設(shè)置樣式，其中對(duì)象的 key 是 CSS 屬性名，value 是對(duì)應(yīng)的值。示例代碼如下：

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

2、數(shù)組語(yǔ)法

可以通過(guò)在模板中綁定一個(gè)數(shù)組來(lái)動(dòng)態(tài)設(shè)置樣式，其中數(shù)組中的元素是對(duì)象，對(duì)象的 key 是 CSS 屬性名，value 是對(duì)應(yīng)的值。示例代碼如下：

<template>
  <div :style="[baseStyles, activeStyles]">Hello, world!</div>
</template>
<script>
export default {
  data() {
    return {
      baseStyles: {
        color: 'red',
        fontSize: '16px'
      },
      activeStyles: {
        fontWeight: 'bold'
      }
    }
  }
}
</script>

3、計(jì)算屬性

可以通過(guò)定義一個(gè)計(jì)算屬性來(lái)動(dòng)態(tài)設(shè)置樣式。示例代碼如下：

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

4、對(duì)象綁定

可以通過(guò)定義一個(gè)樣式對(duì)象，在模板中綁定該對(duì)象來(lái)動(dòng)態(tài)設(shè)置樣式。示例代碼如下：

<template>
  <div v-bind:style="styleObject">Hello, world!</div>
</template>
<script>
export default {
  data() {
    return {
      styleObject: {
        color: 'red',
        fontSize: '16px'
      }
    }
  }
}
</script>

以上就是在 Vue 中常用的動(dòng)態(tài)設(shè)置樣式的方法，根據(jù)實(shí)際情況選擇合適的方法即可。

總結(jié)

到此這篇關(guān)于Vue動(dòng)態(tài)樣式幾種常用方法總結(jié)的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)樣式方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)登錄以及登出詳解
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2021-09-09
vue-rx的初步使用教程
這篇文章主要介紹了vue-rx的初步使用教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
VUE UPLOAD 通過(guò)ACTION返回上傳結(jié)果操作
這篇文章主要介紹了VUE UPLOAD 通過(guò)ACTION返回上傳結(jié)果操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
Vue結(jié)合SignalR實(shí)現(xiàn)前后端實(shí)時(shí)消息同步
這篇文章主要為大家詳細(xì)介紹了Vue結(jié)合SignalR實(shí)現(xiàn)前后端實(shí)時(shí)消息同步，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)
這篇文章主要介紹了vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
Vue快速理解事件綁定是什么
一般在vue項(xiàng)目開(kāi)發(fā)中，事件的處理邏輯一般很復(fù)雜，我們可以將處理的邏輯變成函數(shù)，在vue開(kāi)發(fā)中，一般使用的是使用的是v-on指令進(jìn)行事件的監(jiān)聽(tīng)，事件監(jiān)聽(tīng)的過(guò)程中觸發(fā)相應(yīng)的JavaScript代碼
2022-08-08
Element-ui upload上傳文件限制的解決方法
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
基于Vue 服務(wù)端Cookies刪除的問(wèn)題
今天小編就為大家分享一篇基于Vue 服務(wù)端Cookies刪除的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue動(dòng)態(tài)路由:路由參數(shù)改變,視圖不更新問(wèn)題的解決
今天小編就為大家分享一篇vue動(dòng)態(tài)路由:路由參數(shù)改變,視圖不更新問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue中數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子
今天小編就為大家分享一篇vue中數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11