Question

我想在单击按钮时更改按钮的颜色。如果在jquery上，我可能会使用$（this）。

<button v-on:click="clicked($event)">Change my color</button>

在脚本中

...
methods: {
    clicked:function(event){
        ???
    }
}

如何使用单击的元素？

Answer 1

您应该为此考虑状态。在这些情况下，请避免考虑jQuery的方式，因为这会使您的组件对其状态的反应性降低。

您可以在按钮上附加一个取决于其状态的类。单击时，您更改状态，然后它将更改应用于其的类。查看示例：

http://jsfiddle.net/taokbg7q/

<button :class="{clicked: btnClicked}" @click="clickBtn"> My Button </button>

// ...

data: {
    btnClicked: false
},
methods: {
    clickBtn() {
        this.btnClicked = true
    }
}

// ...

.clicked {
  background-color: red;
}

Answer 2

您可以动态使用样式和类：

    <button v-on:click="clicked()" :style="{color: 
      myColor}">Change my color</button

      data(){
         return {
           myColor: 'black'
         } 
        }
         methods: {
             clicked (){
             this.myColor = 'red';
        }
       }

Answer 3

将动态内联样式绑定到button，并使用事件处理程序更改其值。

HTML

<div id="app">
  <button v-on:click="clicked" :style="{color: activeColor}">Change my color</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    activeColor: null
  },
  methods: {
    clicked() {
      this.activeColor = 'red'
    }
  }
});

在vuejs中，单击元素时如何传递html元素？

3 个答案: