u014304657
L-YASHU
2017-07-27 11:30
采纳率: 41.7%
浏览 1.7k

Vue.js 关于Vue.js中样式引入问题

 <!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的背景色?
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dcxy0
    Q544471255 2017-07-27 14:38
    已采纳

    参考:

    https://cn.vuejs.org/v2/guide/class-and-style.html

    官方例子:
    
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    
    data: {
      activeColor: 'red',
      fontSize: 30
    }
    
    你的可以改成:
    
    <button type="button" name="button" @click="plus" v-bind:style="{background: bgcolor }">赞赞赞{{ count }}</button>
    
    
    点赞 评论

相关推荐