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);
	}