javascript - 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 也失败了。一位 friend 告诉我，按钮很难使样式正常工作，这可能不是我的代码错误，可能是默认样式覆盖了它(我不能接受)。所以我所做的是尝试将 !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>