<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js组件</title>
</head>
<body>
<div id="app">
<counter heading="完美极了" bgcolor="green"></counter>
<counter heading="糟糕透了" bgcolor="red"></counter>
</div>
<template id="mycounter">
<div class="">
<h1>{{ heading }}</h1>
<button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button>
</div>
</template>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
Vue.component("counter",{
template:"#mycounter",
data:function(){
return { count : 0};
},
props:["heading","bgcolor"],
methods : {
plus : function(){
this.count += 1;
}
}
});
new Vue({
el : "#app"
});
</script>
</body>
</html>
上面的代码中
赞赞赞{{ count }}
这一行报错，报错信息为：
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of
, use
.
改为：
赞赞赞{{ count }}
后仍然报错！
请问大家，这里应该怎么正确引入父组件传过来的bgcolor作为button的背景色？
改为：
赞赞赞{{ count }}
后仍然报错！
请问大家，这里应该怎么正确引入父组件传过来的bgcolor作为button的背景色？
