vue 如何在 style 标签里使用变量（数据）

参考资料

SFC CSS Features | Vue.js

在 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属性呢？

也很简单

同样参考

SFC CSS Features | Vue.js

<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标签中使用data响应式数据？
文章目录一.面临到的需求? 二.如何在css中使用变量? 三.vue如何在style标签中使用data响应式数据? 一.面临到的需求? 首先我们知道css对应是有伪类的,如:hover, :acti ...
在js中获取vue文件的style标签下的内容
前言: 由于业务需求,将页面内容转成pdf,前端需要提供整个页面的dom元素提供给后端,但样式并不是在行内而是在<style>标签里. 解决方案: 通过原生属性 document.styl ...
.vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景问题由 ...
vue项目在style标签中引入css,less,sass的方法
vue项目 style标签引入 less sass less和sass需要安装相应的依赖 package.json 中加上并再次npm install 重启项目 "less": ...
Vue中的style标签的lang=“ “和scpoed属性
Vue中的style 的lang=" "和scpoed属性普通的 style 标签只支持普通的样式,如果想要启用 scss 或 less ,需要为 style 元素,设置 lan ...
在vue中的style标签内如何引入外部的css文件
1.使用style标签引入 <style src="../common/css/bodycss.css"></style> 2.在style标签内使用@im ...
vue的style标签里面设置变量
1.在style里面添加变量 *适用于组件统一调整样式 //html <div class="headerBox"><p class="headerCo ...
Vue -- 如何在 span 标签上实现一个点击事件
使用 JQuery 时,需要通过下述方式为选中的页面元素绑定单击事件 $(".myclass").on("click" , function(){ } 但在 V ...
在vue-cili中使用scss在组件文件.vue中的style标签中输入属性lang=“scss“报错
Module build failed: Error: Missing binding E:\newsproject\node_modules_nod 一定能解决的办法: 1在配置文件包package ...

vue 如何在 style 标签里使用变量（数据）

在 style 中使用 data 变量

options 方式：

Composition 方式

vue 如何在 style 标签里使用变量（数据）相关推荐

最新文章

热门文章