我try 将v-绑定与Vue 3和Nuxt一起使用,将计算的属性值传递给css中的url():
<template>
<div class="box-container"></div>
</template>
<script lang="ts" setup>
const props = defineProps ( {
maskImage: { type: String, default: ''},
width: { type: Number, default: 100 }
})
const width = computed(()=> props.width + 'px')
const maskImage = computed(() => `assets/sprite/svg/${props.maskImage}.svg`)
</script>
<style lang="sass" scoped>
.box-container
background-color: blue
width: v-bind(width)
-webkit-mask-image: url(v-bind(maskImage))
-webkit-mask-position: center
-webkit-mask-repeat: no-repeat
</style>
使用这段代码,计算的宽度是正确的,但是掩码URL不是.
我如何才能以正确的方式传递该值?