Myujth

Here is the situation, I use v-for to display lots of data in JSON as seperate buttons. What I want to do is when i click single one of those buttons, the button's background color will change.
I want to use @click to bind function to each button, and in that function, do
as this

theButtonDOM.style.backgroundColor = 'black';

So, how can I get that DOM whose div element is generated by v-for?
OR any other solution to solve this 'background color change' problem?

Any time you trigger a click event in Vue template, you can access the event adding the special variable $event as parameter to the function.

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

and then access the target of the event inside the method:

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

Even just with bind the method to the @click event without any argument, you can access the event as your first parameter.

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

Then you can play with your button.

Look at this stackoverflow question and the Vue documentation for more details.

You can pass $event

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

Then in your method

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

You can use @click and v-bind:class. When you click on an item, its index will be stored in selectedItem. Then v-bind:class automatically will add the class to the item that has an index equal to 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>

I am assuming you want the buttons to act as individual switches and not a radio group, as implemented in the answer by @eag845.

You could add a 'clicked' boolean attribute to your JSON Objects.

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

Then use that attribute as a conditional to bind a CSS class using v-bind:class or :class, and then toggle the attribute within @click or whatever event handler function you put inside @click.

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

Stylez

.button 
 background-color: white;

.button--activated 
 background-color: black;