Question

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

＆＃xA;＆＃xA;

（现在我明白技术上我没有使用vue .js在我的第一个例子中用来设计，但这是为了展示我曾尝试过的东西）

＆＃xA;＆＃xA;

尝试1：

＆＃xA ;＆＃XA;

 <代码>＆LT;模板＆GT;＆＃XA; ＆lt; div class =“container”＆gt;＆＃xA; ＆lt; input id =“test-btn”type =“button”v-on：click = clicked（）＆gt; ＆＃XA; ＆LT; / DIV＆GT;＆＃XA;＆LT; /模板＆GT;＆＃XA;＆LT;脚本＆GT;＆＃XA; export default {＆＃xA;名称：'test-btn'，＆＃xA;方法：{＆＃xA;点击：function（）{＆＃xA;警报（“这是你的消息”）＆＃xA;＆＃xA; }＆＃XA; }＆＃XA; }＆＃xA;＆lt; / script＆gt;＆＃xA;＆lt; style scoped＆gt;＆＃xA; ＃测试BTN {＆＃XA;颜色：＃CC00CC;＆＃xA;宽度：150;＆＃xA;身高：50;＆＃xA; }＆＃xA;＆lt; / style＆gt;＆＃xA;

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

由于我无法使用它，我尝试使用v-bind方法。< ＆p>＆＃xA;＆＃xA;

尝试2：

＆＃xA;＆＃xA;

 ＆lt; template＆gt;＆＃xA; ＆lt; div class =“container”＆gt;＆＃xA; ＆lt; input id =“test-btn”type =“button”v-on：click = clicked（）v-bind：style =“btnStyle”＆gt; ＆＃XA; ＆LT; / DIV＆GT;＆＃XA;＆LT; /模板＆GT;＆＃XA;＆LT;脚本＆GT;＆＃XA; export default {＆＃xA;名称：'test-btn'，＆＃xA;方法：{＆＃xA;点击：function（）{＆＃xA;警报（“这是你的消息”）＆＃xA; }＆＃XA; }，＆＃XA;数据：{＆＃xA; btnStyle：{＆＃xA;颜色：'红色'，＆＃xA;宽度：100，＆＃xA;身高：50＆＃xA; }＆＃XA; }＆＃XA; }＆＃xA;＆lt; / script＆gt;＆＃xA;＆lt; style scoped＆gt;＆＃xA; / * #test-btn {＆＃xA;颜色：＃CC00CC;＆＃xA;宽度：150;＆＃xA;身高：50;＆＃xA; } * /＆＃xA;＆lt; / style＆gt;＆＃xA;

＆＃xA;＆＃xA;

此v-bind尝试也失败了。一位朋友告诉我按钮很难使样式工作，并且它可能不是我的代码的错误，它可能是默认样式过度骑（我不能接受）。所以我所做的是尝试在脚本标签中将！important 添加到我的css颜色行，但这也不起作用。

＆＃xA;

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>

css按钮样式不能使用带有vue.js的<style>标签

1 个答案: