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

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

原创最新推荐文章于 2025-05-14 18:31:08 发布 · 6.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js

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

直接上代码

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]",所以加上中括号就能解决