Vue中如何将props传递给data-*属性并展示数据？

你当前代码里的data-progress="{{ percent }}"写法有误，Vue模板中不能在HTML属性内使用双大括号插值，需要用v-bind指令（或简写冒号）来绑定动态属性值。

正确的绑定方式有两种：

• 完整指令写法：v-bind:data-progress="percent"
• 简写形式（日常开发更常用）：:data-progress="percent"

修改后的完整代码如下：

<script setup>
const props = defineProps({
    percent: {
        type: String,
        default: '0'
    }
})
</script>

<template>
    <div class="progress-circle" :data-progress="percent">
        <div class="circle">
            <div class="full progress-circle__slice">
                <div class="progress-circle__fill"></div>
            </div>
            <div class="progress-circle__slice">
                <div class="progress-circle__fill"></div>
                <div class="progress-circle__fill progress-circle__bar"></div>
            </div>
        </div>
        <div class="progress-circle__overlay">{{ percent }}</div>
    </div>
</template>

这样绑定后，data-progress属性就会正确显示props传递过来的percent值。如果后续把percent的类型改成Number也没问题，Vue会自动将其转换为字符串赋值给data属性。

内容的提问来源于stack exchange，提问作者Дмитрий Моисеев