uniapp中 :style的语法问题(兼容微信小程序)

最新推荐文章于 2025-05-14 18:31:08 发布

HXH_csdn

最新推荐文章于 2025-05-14 18:31:08 发布

阅读量6.7k

点赞数 7

文章标签： css vue.js

本文链接：https://blog.csdn.net/HXH_csdn/article/details/113864516

版权

这篇博客探讨了在小程序中如何使用计算属性来设置元素的样式。通过`computed`对象，作者展示了如何动态计算`padding`和`margin`，以适应不同的页面和商品间距。当返回值为对象时，需要使用`[Style]`语法来正确地将对象转化为样式字符串，避免编译结果出现`[object,object]`的问题。

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

直接上代码

html
<view class="c-bg-g l-ft l-fw" :style="[Style]"></view>

js

computed: {
	Style() {
		let {
			page_margin,
			goods_margin
		} = this.data
		let obj = {
			"padding": `0 ${page_margin}px`,
			"margin": `0 -${goods_margin/2}px`
		}
		return obj
	},
}

刚开始是:style=“Style"这样写的,如果return回的是字符串则没有问题,但是现在是一个对象;小程序编译的结果是style=”[object,object]",所以加上中括号就能解决