我想让两个button的颜色不一样使用{{color}}这个形式进行连接，但是得不到想要变化的颜色。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="text/html;charset=utf-8">
<title>Vue js</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app">
<counter heading="赞" color="green"></counter>
<counter heading="滚"></counter>
</div>
<template id="counter-template">
<div>
<h1>{{heading}}</h1>
<button @click="count+=1" style="background: {{color}}">{{count}}</button>
</div>
</template>
<script>
Vue.component('counter',{
template:'#counter-template',
props:['heading','color'],
data:function(){
return{count:0};
}
});
new Vue({
el:'#app'
})
</script>
</body>
</html>
<button @click="count+=1"
:style="{background:color}">{{count}}</button>