Javascript css按钮样式无法使用<；风格>；带有vue.js的标记

我目前正在尝试学习vue.js，并尝试向组件添加样式。组件本身可以工作，功能（警报消息）也可以工作，但我无法实现样式

（现在我明白了，从技术上讲，我在第一个示例中并没有使用vue.js来设计样式，但这是为了展示我所做的尝试）

尝试1:

<template>
    <div class="container">
        <input id="test-btn" type="button" v-on:click= clicked()> 
    </div>
</template>
<script>
    export default{
        name:  'test-btn',
        methods: {
                clicked: function () {
                    alert("Here's your message")

                }
            }
    }
</script>
<style scoped>
    #test-btn{
        color: #CC00CC;
        width: 150;
        height: 50;
    }
</style>

<template>
    <div class="container">
        <input id="test-btn" type="button" v-on:click= clicked() v-bind:style="btnStyle"> 
    </div>
</template>
<script>
    export default{
        name:  'test-btn',
        methods: {
                clicked: function () {
                    alert("Here's your message")
                }
            },
        data: {
            btnStyle: {
                color: 'red',
                width: 100,
                height: 50
            }
        }
    }
</script>
<style scoped>
/*  #test-btn{
        color: #CC00CC;
        width: 150;
        height: 50;
    }*/
</style>

导出默认值{
名称：“测试btn”，
方法：{
单击：函数（）{
提醒（“这是你的留言”）
}
}
}
#测试基站{
颜色：#CC00CC；
宽度：150；
身高：50；
}

虽然我已经改变了颜色的宽度和高度，但按钮仍然是通用的灰色，不会改变宽度或高度（它只是保持一个正方形）。但当我点击它时，它确实起作用（至少有些东西起作用）

因为我无法让它工作，所以我尝试使用v-bind方法

尝试2:

<template>
    <div class="container">
        <input id="test-btn" type="button" v-on:click= clicked()> 
    </div>
</template>
<script>
    export default{
        name:  'test-btn',
        methods: {
                clicked: function () {
                    alert("Here's your message")

                }
            }
    }
</script>
<style scoped>
    #test-btn{
        color: #CC00CC;
        width: 150;
        height: 50;
    }
</style>

<template>
    <div class="container">
        <input id="test-btn" type="button" v-on:click= clicked() v-bind:style="btnStyle"> 
    </div>
</template>
<script>
    export default{
        name:  'test-btn',
        methods: {
                clicked: function () {
                    alert("Here's your message")
                }
            },
        data: {
            btnStyle: {
                color: 'red',
                width: 100,
                height: 50
            }
        }
    }
</script>
<style scoped>
/*  #test-btn{
        color: #CC00CC;
        width: 150;
        height: 50;
    }*/
</style>

导出默认值{
名称：“测试btn”，
方法：{
单击：函数（）{
提醒（“这是你的留言”）
}
},
数据：{
B风格：{
颜色：“红色”，
宽度：100，
身高：50
}
}
}
/*#测试btn{
颜色：#CC00CC；
宽度：150；
身高：50；
}*/

v-bind的这一尝试也失败了。一位朋友告诉我，按钮很难使样式工作，这可能不是我的代码中的错误，可能是默认样式超出了它（我不能接受）。所以我所做的就是尝试添加

！重要信息

到脚本标记中我的css颜色行，但这也不起作用。

由于css问题，您的

未设置样式。将

px

添加到

width

和

height

。请参见下面演示中的CSS

color

CSS属性是字体颜色。要更改

颜色，请使用

背景：黄色


newvue({
el:“#应用程序”，
方法：{
单击：函数（）{
提醒（“这是你的留言”）
}
}
})
#测试btn{
颜色：#CC00CC；
背景颜色：黄色；
宽度：150px；/*是150，现在是150px*/
高度：50px；
}

谢谢。很明显，我一定错过了。我也在尝试改变颜色，但这并没有改变
颜色
是字体颜色。要更改按钮颜色，请使用
background:color
。检查答案，我在那里添加了一些信息并更新了演示。