css按钮样式不会使用 标签与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颜色线，但这也不起作用。

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>