How do you manipulate the style of one of the li elements that are looped out of vue v-for?

Click on a li element to appear or disappear a mask on that element, but don"t know how to dynamically bind the class name, only to that element. Now all the elements are masked with one click.
currently thinks like this:
: class= "{show:isShow + index} (this syntax is wrong, which probably means this) wants to bind index to a variable, and then add class to it to display it, but as written above, this syntax cannot achieve
. The second is to add the class name of show1/show2/show3 to each element, but this means that you have to write a lot of css: show1,show2,show3 {display:block}. If there are a lot of elements, you can"t add them all the time

.
Vue.js
Mar.19,2021

I hope I can help you 

<li  v-for="node in nodes" :class={'active': node.actived} @click="clickNode(node)" :key="node.id">{{node.name}}</li>

data(){
    return {
        activedNode:null
    }
},
methods:{
    clickNode(node){
        this.activedNode && (this.activedNode.actived = undefined);
        node.actived = !node.actived;
        this.activedNode = node;
    }
}

after getting the data, the loop adds attributes to each item of the array json,
such as "seen": "false",
then binds to the Miki operation in class
such as < li: class= "list.seen?'masking':''" @ click= "showMasking (index)" >
and then uses the parameter index to modify the specific data you bind. Changing it to true, will add the class name, and changing it back to false will remove the class name

. Add a judgment in the

loop, and just add the class name when you need it.

for example: 

<li v-for="(item,idx) in arr" :key="item.key" :class="idx === 1?'hello':'world'">
</li>

Previous: When element's checkbox updates the number of bound groups, the original v-model bound to true is retained and not refreshed?

Next: How does the json communication server for TCP persistent connection determine the service?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu