有一個(gè)簡單的問題
我想讓兩個(gè)button的顏色不一樣使用{{color}}這個(gè)形式進(jìn)行連接，但是得不到想要變化的顏色。
代碼如下：
<!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>
2018-10-31
<button @click="count+=1"
:style="{background:color}">{{count}}</button>