css 按钮样式无法在 vue.js 中使用 <style> 标签

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 颜色线，但这也不起作用。

Answer 1

你的<button>样式没有设置，因为你有 CSS 问题。添加px到width和height。请参阅下面演示中的 CSS。

CSScolor属性是字体颜色。要更改<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也可以与andv-bind:style一起使用（只需执行width: '150px';and即可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>