快捷導航

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

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

在我們編寫css樣式中是不能直接使用vue data中的變量的,下面這篇文章主要給大家介紹了關(guān)于vue如何在style標簽中使用變量(數(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>

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

其實這個很好解決

一種是使用 computed 計算屬性改變它

<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 計算屬性

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

當然還有第三種那就是傳值的時候就傳成字符串格式

option 方式大同小異

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

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

也很簡單

同樣參考

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標簽中使用變量(數(shù)據(jù))的文章就介紹到這了,更多相關(guān)vue在style標簽使用變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng),需要的朋友可以參考下
2019-12-12
vue2.0s中eventBus實現(xiàn)兄弟組件通信的示例代碼
這篇文章主要介紹了vue2.0s中eventBus實現(xiàn)兄弟組件通信的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
vue基礎(chǔ)入門之vuex安裝與使用
vuex是一個專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue入門之vuex安裝與使用的相關(guān)資料,需要的朋友可以參考下
2021-08-08
基于vue-cli、elementUI的Vue超簡單入門小例子（推薦）
這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡單入門小例子，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
Vue的過濾器你真了解嗎
這篇文章主要為大家詳細介紹了Vue的過濾器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
vue中eventbus被多次觸發(fā)以及踩過的坑
這篇文章主要介紹了vue中eventbus被多次觸發(fā)以及踩過的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
vue調(diào)用swiper插件步驟教程(最易理解且詳細)
有時候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過npm安裝,從而進行統(tǒng)一安裝包管理,下面這篇文章主要給大家介紹了關(guān)于vue調(diào)用swiper插件的相關(guān)資料,需要的朋友可以參考下
2023-04-04
vue3響應(yīng)式Proxy與Reflect的理解及基本使用實例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Proxy與Reflect的理解及基本使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Vue中Axios從遠程/后臺讀取數(shù)據(jù)
今天小編就為大家分享一篇關(guān)于Vue中Axios從遠程/后臺讀取數(shù)據(jù)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式
這篇文章主要介紹了antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10