vue3 组件怎么传递变量

2022-01-19 18:25:26 +08:00
 fangwenxue
<div class="tile-content">
   <Progress progressValue="{{item.disk}}" />
</div>
        
### Progress.vue 
script setup
defineProps({
  progressValue: String
})
const getProgressColor = (v) => {
  console.log(v)
  return (parseInt(v) >= 80 ? 'bg-red-500' : 'bg-blue-500');
}
/script
<template>
  <div class="progress">
    <div class="progress-bar" :class="getProgressColor(progressValue)" :style="{width: progressValue + '%'}"></div>
  </div>
</template>
925 次点击
所在节点    问与答
5 条回复
TomatoYuyuko
2022-01-19 18:41:20 +08:00
?你为什么不直接 item.disk
fangwenxue
2022-01-19 19:13:32 +08:00
@TomatoYuyuko
<Progress progressValue="item.disk" /> 这样报错
Danswerme
2022-01-19 20:08:46 +08:00
<Progress :progressValue="item.disk" />
dengshen
2022-01-19 20:26:01 +08:00
这是 react 写多了吧?至少看一下 vue 数据绑定部分的文档啊
TomatoYuyuko
2022-01-20 10:11:58 +08:00
@fangwenxue 动态绑定啊。。不加冒号就是静态的值

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/829299

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX