CSS按鈕樣式無法使用<style> tags with vue.js

Question

我目前正在嘗試學習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>

盡管我已經更改了顏色的寬度和高度，但是按鈕仍然是通用的灰色，並且不會改變寬度或高度（它只是保持正方形）。 但是當我單擊它時它確實起作用（至少有一些作用）。

由於無法正常工作，我嘗試使用v-bind方法。

嘗試2：

<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>

對v-bind的嘗試也失敗了。 一位朋友告訴我，按鈕很難使樣式生效，這可能不是我的代碼有誤，這可能是默認樣式過度使用了（我無法接受）。 因此，我嘗試在腳本標記中的!important css顏色行中添加!important ，但這還是行不通的。

Answer 1

您的<button>樣式沒有設置，因為您有CSS問題。 將px添加到width和height 。 請參閱下面的演示中的CSS。

color CSS屬性是字體顏色。 要更改<button>顏色，請使用background: yellow; 。

 new Vue({ el: '#app', methods: { clicked: function() { alert("Here's your message") } } }) 

 #test-btn { color: #CC00CC; background-color: yellow; width: 150px; /* was 150, now 150px */ height: 50px; } 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <div class="container"> <input id="test-btn" type="button" v-on:click="clicked()" value="Click Me"> </div> </div> 

同樣適用於data和v-bind:style （僅width: '150px';和height: '50px'; ）。 要更改背景顏色，請同時添加background: 'yellow' 。

 new Vue({ el: '#app', data: { btnStyle: { color: '#CC00CC', background: 'yellow', width: '100px', height: '50px' } }, methods: { clicked: function() { alert("Here's your message") } } }) 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <div class="container"> <input id="test-btn" type="button" v-on:click="clicked()" v-bind:style="btnStyle" value="CLICK ME"> </div> </div>