vue3新特性 | ＜style＞中使用js变量

ssypp

已于 2022-10-15 22:47:44 修改

阅读量3.4k

点赞数 3

分类专栏： vue javascript vue3 文章标签： javascript 前端 vue.js

于 2022-10-14 16:50:00 首次发布

本文链接：https://blog.csdn.net/mrbignose/article/details/127323577

版权

vue 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

1.1 问题描述

想要把从父组件传来的颜色，大小等样式属性应用到css中

1.2 代码片段

<template>
  <p>hello vue3</p>
</template>
<script setup lang="ts">
import { ref, toRefs } from "vue";
interface PropType {
	color?:string,
	fontSize?:string | number
}
const prop = withDefaultProps(defineProps<PropType>(),{
	color:'red',
	fontSize:18
})

1.3 解决方案

使用vue3新特性 css v-bind

<template>
  <p>hello vue3</p>
</template>
<script setup lang="ts">
import { ref, toRefs } from "vue";
interface PropType {
	color?:string,
	fontSize?:string | number
}
const prop = withDefaultProps(defineProps<PropType>(),{
	color:'red',
	fontSize:18
})
const { color, fontSize } = toRefs(prop)

if(typeof(fontSize?.value) === 'number'){
	fontSize?.value = fontSize?.value + 'px'
}
</script>
<style scoped>
p {
  color: v-bind(color);
  font-size: v-bind(fontSize)
}
</style>