Vue.js中如何操作DOM答案

【问题标题】：How to operate DOM in Vue.jsVue.js中如何操作DOM
【发布时间】：2019-04-19 05:27:51
【问题描述】：

在这种情况下，我使用 v-for 将 JSON 中的大量数据显示为单独的按钮。我想要做的是当我单击其中一个按钮时，按钮的背景颜色会改变。我想使用@click 将函数绑定到每个按钮，并在该函数中执行像这样

theButtonDOM.style.backgroundColor = 'black';

那么，我怎样才能得到 div 元素由 v-for 生成的 DOM？或者任何其他解决这个“背景颜色变化”问题的解决方案？

【问题讨论】：

标签： javascript css vue.js

【解决方案1】：

任何时候你在 Vue 模板中触发点击事件，你都可以通过添加特殊变量 $event 作为函数的参数来访问该事件。

<button @click="my_method($event, other_argument)"></button>

然后在方法内部访问事件的目标：

methods: {
    my_method(event, other_paramethers) {
        let button = event.target
}
}

即使只是将方法绑定到 @click 事件而没有任何参数，您也可以将事件作为您的第一个参数来访问。

<button @click="my_method"></button>
...
methods: {
    my_method($event) {
        let button = $event.target
}
}

然后你就可以用你的按钮玩了。

查看this stackoverflow question 和the Vue documentation 了解更多详情。

【讨论】：

【解决方案2】：

我假设您希望按钮充当单独的开关而不是 radio group，正如 @eag845 的回答中所实现的那样。

您可以向您的 JSON 对象添加一个“clicked”布尔属性。

arrayOfJSONObjects.forEach(object => object.clicked = false); // Add 'clicked' attribute and init to false

然后使用该属性作为条件，使用v-bind:class 或:class 绑定CSS 类，然后在@click 或您放在@click 中的任何事件处理函数中切换属性。

<button
    v-for="btn in arrayOfJSONObjects"
    :class="{ 'button--activated': btn.clicked }"
    @click="btn.clicked = !btn.clicked"
>{{btn.foo}}</button>

风格化

.button {
  background-color: white;
}
.button--activated {
  background-color: black;
}

【讨论】：

【解决方案3】：

您可以使用@click 和v-bind:class。当您单击一个项目时，其索引将存储在selectedItem 中。然后v-bind:class 会自动将类添加到index 等于selectedItem 的项目中。

new Vue({
  el: '#app',
  data: {
    selectedItem: ""
  },
  computed:{},
  methods: {}
  }
)

.selectedItemClass {
  background-color:green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">

  <div v-for="(item,index) in ['aa','bb','cc']"
    v-bind:class="{  selectedItemClass : (selectedItem === index) }"
    @click="selectedItem = index"
  >{{item}}</div>
  
</div>

【讨论】：

【解决方案4】：

你可以传$event

<button @click="changeColor($event)"></button>

然后在你的方法中

this.changeColor = function(evt){ evt.target.style.backgroundColor = 'red'; }

【讨论】：