记uniapp总动态:style无法用带参数的computed属性问题

最新推荐文章于 2025-04-09 14:45:45 发布

月明泉清

最新推荐文章于 2025-04-09 14:45:45 发布

阅读量1.1k

点赞数 10

文章标签： uni-app 前端 javascript

本文链接：https://blog.youkuaiyun.com/domyself918/article/details/135425381

版权

文章讲述了在Vue.js中使用v-for遍历组件时，如何根据item的不同配置不同style，避免直接使用style导致的错误。作者通过将style作为组件属性并动态绑定解决了问题，强调编程时应灵活变通，不拘泥于传统方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

v-for里面的组件呢，我要根据不同的item配置不同的style,于是有了这样的写法

<template>
    <view class="weeks-item" v-for="(day,dayIndex) in item" :key="dayIndex">
					
		<view :style="bgStyle(day)" >
			{{ day. extraInfo.info}}
		</view>
	</view>
</template>
<script>
    export default{
        computed:{
            bgStyle:function(){
				return (day)=>{
					if(day.extraInfo){
						return `background-color:${day.extraInfo.data.bgColor}`
					}else{
						return ''
					}
				}
			}}
    }
</script>

然后一运行，就给报错

👉🏻 ☞ 解决办法：

<template>
    <view class="uni-calendar__weeks-item" 
        v-for="(day,dayIndex) in styledItems(item)" :key="dayIndex">
						
	    <view class="daylayer-custom">
		    <view :style="day.dynamicStyle" >
			    {{ day. extraInfo.info}}
		    </view>
	    </view>
    </view>
</template>
<script>
    export default{
        computed:{
            styledItems:function(){
				return (item)=>{
					return item.map(day => ({
						...day,
						dynamicStyle: this.getDynamicStyle(day)
					}));
				}
			}
        },
        methods: {
            getDynamicStyle(day) {
				if(day.extraInfo){
						return `background-color:${day.extraInfo.data.bgColor}`
						
					}
				return ''
			},

        }
    }
</script>

这样，就可以了，主要修改思路就是把style作为day元素的一个属性，然后动态style绑定这个属性即可。

小感悟：写代码不要太固执，打不过就加入，主打一个曲线救国。