写法一 :使用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);
}