Vue3 在SetUp中使用变量名动态控制样式

写法一 :使用toRef

首先引入

	import {
    
     ref, toRef，reactive} from 'vue';

然后声明变量

	const state = reactive({
    
    
		opacity: 1
	})

	const opacityRef = toRef(state, 'opacity');

然后给变量赋值

opacityRef.value = 0.6;

在style中使用，使用v-bind双向绑定数据
v-bind指令主要用于响应式的更新html属性

	.img {
    
    
		opacity: v-bind(opacityRef);
	}

写法二 :使用toRefs

首先引入

	import {
    
     ref, toRefs，reactive} from 'vue';

然后声明变量

	const state = reactive({
    
    
	opacityRef: 1
	})

	const {
    
     opacityRef } = toRefs(state);

然后给变量赋值

opacityRef.value = 0.6;

在style中使用，使用v-bind双向绑定数据（注意：style 里要使用lang="scss"）
v-bind指令主要用于响应式的更新html属性

	.img {
    
    
		opacity: v-bind(opacityRef);
	}