vue如何在style標簽中使用變量(數據)詳解
更新時間：2022年09月21日 09:46:42 作者：Z_?One?Dream
在我們編寫css樣式中是不能直接使用vue data中的變量的,下面這篇文章主要給大家介紹了關于vue如何在style標簽中使用變量(數據)的相關資料,需要的朋友可以參考下
參考資料
在 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>還有一個問題，如果我們的變量是數字，但是我們想要設置像素怎么辦？
其實這個很好解決
一種是使用 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屬性呢？
也很簡單
同樣參考
<template>
<p :class="$style.red">This should be red</p>
</template>
<style module>
.red {
color: red;
}
</style>還可以設置不同的變量
<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');總結
到此這篇關于vue如何在style標簽中使用變量(數據)的文章就介紹到這了,更多相關vue在style標簽使用變量內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue導入.md文件的步驟（markdown轉HTML），幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
寫后臺管理的時候會有很多列表以及相應的條件查詢,下面這篇文章主要給大家介紹了關于Vue3使用Element?Plus實現列表界面的方法步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要給大家介紹了Vue使用QrcodeVue生成二維碼并下載的示例,文章中有詳細的代碼示例供大家參考,感興趣的小伙伴可以參考閱讀下2023-08-08
這篇文章主要為大家總結了vue2.0開發(fā)實踐之入門,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
使用vue初用antd 用v-model來雙向綁定Form表單問題
這篇文章主要介紹了使用vue初用antd 用v-model來雙向綁定Form表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue對象的深度克隆方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項目中我們可以通過行內樣式進行動態(tài)修改樣式,下面這篇文章主要給大家介紹了關于vue中如何使用定義好的變量設置css樣式的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
vue內置組件keep-alive事件動態(tài)緩存實例
這篇文章主要介紹了vue內置組件keep-alive事件動態(tài)緩存實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue項目中導入swiper插件的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
在當今前端開發(fā)的領域中,Vue 框架因其高效和靈活的特性備受開發(fā)者青睞,而 Vant 是一個輕量的移動端組件庫,為 Vue 應用的開發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過 Vant 來實現日期選擇器的使用,需要的朋友可以參考下2024-08-08