Ant Design of Vue 中的Card 卡片的headStyle和bodyStyle设置_a-card headstyle

从官网上可以看到Card的相关使用和API https://vue.ant.design/components/card-cn/

这里可以看到headStyle 和 bodyStyle 的类型都是object，但是为它赋值的需要注意一些问题。

如果只设置一个样式，可以直接在行内写

<a-card title="title" :bordered=false :headStyle="{color:'#0785fd'}" :bodyStyle="{padding:'0'}"></a-card>

但是如果要设置多个CSS样式这样的书写方式就会报错出问题了

解决办法：（以headStyle为例）

在js中定义一个变量，再将变量值赋予headStyle即可

html：

<a-card title="title" class="bg" :bordered=false :headStyle='tstyle'></a-card>

js：

<script>
	export default {
		data() {
			return {
				tstyle:{"color": "#0785fd","font-weight": "bold"}
			}
		},
		methods: {
 
		}
	}
</script>