快捷導(dǎo)航

vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))詳解

更新時(shí)間：2022年09月21日 09:46:42 作者：Z_?One?Dream

在我們編寫css樣式中是不能直接使用vue data中的變量的,下面這篇文章主要給大家介紹了關(guān)于vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))的相關(guān)資料,需要的朋友可以參考下

在 style 中使用 data 變量

options 方式：

<template>
  <div class="text">hello</div>
</template>
 
<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>
 
<style>
.text {
  color: v-bind(color);
}
</style>

Composition 方式

<script setup>
const theme = {
  color: 'red'
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

還有一個(gè)問題，如果我們的變量是數(shù)字，但是我們想要設(shè)置像素怎么辦？

其實(shí)這個(gè)很好解決

一種是使用 computed 計(jì)算屬性改變它

<script setup>
import { computed } from 'vue';
const props = defineProps({ size: Number });
 
const sizePx = computed(() => `${props.size}px`)
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  font-size: v-bind(sizePx);
}
</style>

還有一種方式是使用 calc css 計(jì)算屬性

<script setup>
defineProps({ size: Number });
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  font-size: calc(1px * v-bind(size));
}
</style>

當(dāng)然還有第三種那就是傳值的時(shí)候就傳成字符串格式

option 方式大同小異

==========================================================================================

那么如何在代碼中使用style屬性呢？

也很簡(jiǎn)單

同樣參考

SFC CSS Features | Vue.js

<template>
  <p :class="$style.red">This should be red</p>
</template>
 
<style module>
.red {
  color: red;
}
</style>

還可以設(shè)置不同的變量

<template>
  <p :class="classes1.red">This should be red</p>
</template>
 
<style module="classes1">
.red {
  color: red;
}
</style>
 
<style module="classes2">
.red {
  color: green;
}
</style>

如果是在 script 中使用，可以使用 useCssModule

import { useCssModule } from 'vue';
const classes1 = useCssModule('classes1');
const classes2 = useCssModule('classes2');

總結(jié)

到此這篇關(guān)于vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))的文章就介紹到這了,更多相關(guān)vue在style標(biāo)簽使用變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue導(dǎo)入.md文件的步驟（markdown轉(zhuǎn)HTML）
這篇文章主要介紹了vue導(dǎo)入.md文件的步驟（markdown轉(zhuǎn)HTML），幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟
寫后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
Vue使用QrcodeVue生成二維碼并下載的示例代碼
這篇文章主要給大家介紹了Vue使用QrcodeVue生成二維碼并下載的示例,文章中有詳細(xì)的代碼示例供大家參考,感興趣的小伙伴可以參考閱讀下
2023-08-08
vue2.0開發(fā)實(shí)踐總結(jié)之入門篇
這篇文章主要為大家總結(jié)了vue2.0開發(fā)實(shí)踐之入門,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
使用vue初用antd 用v-model來(lái)雙向綁定Form表單問題
這篇文章主要介紹了使用vue初用antd 用v-model來(lái)雙向綁定Form表單問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue對(duì)象的深度克隆方式
這篇文章主要介紹了vue對(duì)象的深度克隆方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue中使用定義好的變量設(shè)置css樣式詳解
vue項(xiàng)目中我們可以通過行內(nèi)樣式進(jìn)行動(dòng)態(tài)修改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用定義好的變量設(shè)置css樣式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2020-10-10
vue項(xiàng)目中導(dǎo)入swiper插件的方法
這篇文章主要介紹了vue項(xiàng)目中導(dǎo)入swiper插件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-01-01
Vue使用vant實(shí)現(xiàn)日期選擇器功能
在當(dāng)今前端開發(fā)的領(lǐng)域中,Vue 框架因其高效和靈活的特性備受開發(fā)者青睞,而 Vant 是一個(gè)輕量的移動(dòng)端組件庫(kù),為 Vue 應(yīng)用的開發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過 Vant 來(lái)實(shí)現(xiàn)日期選擇器的使用,需要的朋友可以參考下
2024-08-08