vue中v-for通过动态绑定class实现触发效果

<template>
 <div class=\"app-*\">
  <ul>
   <li
    v-for=\"(item,i) of list\"
    :key=\"i\"
    class=\"item\"
    @click=\"clickIndex=i\"
    :class=\"{\'click\':i==clickIndex}\"
   ></li>
  </ul>
 </div>
</template>

< >
export default {
 data() {
  return {
   list: [1, 2, 3, 4],
   clickIndex: -1
  };
 },
 methods: {}
};
</ >
<style scoped>
.item {
 display: inline-block;
 width: 100px;
 height: 100px;
 cursor: pointer;
 border: 1px solid black;
}
.item:hover {
 background: gray;
}
.item.click {
 background: red;
}
</style>

<template>
 <div class=\"hello\">
   <ul>
     <li  v-for=\"(item, itemIndex) in test\" 
        :key=\"item.id\" 
        :class=\"{defaultClass: itemIndex === isActive}\"
        @mouseenter=\" (itemIndex)\" 
        @mouseleave=\" \">
       {{ itemIndex+1 }} :{{ item.  }}
       <button v-if=\"isActive === itemIndex\" @click=\"deleteItem(itemIndex)\">删除({{itemIndex+1}})</button>
     </li>
   </ul>
 </div>
</template>

< >
export default {
 name: \'HelloWorld\',
 data () {
  return {
   test: [
     {   
       id: 1,
        : \'  first\'
     },
     {
       id: 2,
        : \'  second\'
     },
     {
       id: 3,
        : \'  third\'
     }
   ],
   isActive: \'\'
  }
 },
 methods: {
    (index) {
     this.isActive = index
   },
    () {
     this.isActive = \'\'
   },
   deleteItem(index) {
     this.test.splice(index, 1)
   }
 },
 computed: {
   
 }
}
</ >

<!-- Add \"scoped\" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 /* display: inline-block; */
 margin:10px;
}
a {
 color: #42b983;
}
.defaultClass{
  background-color: red;
}
</style>