vuea到z分类

<template>
  <div class="dev">
    双重结构数组对象
   
    <div v-for = "(item,i) in no_check_items"  :class = "no_check_sindex == i ? 'addclass_no' : '' " @mouseover='dowm(i,item.name)' :key="i">

      {{item.name}} ===============  {{i}}====== {{item.valuelist}} 
      
       <div v-for = "(item2,i2) in item.valuelist"     :key="i2">
       {{item2.val}}
       </div>
       
         

        

  </div> 
  </div>
</template> 

<script>
export default {
  name: 'dev',
  data () {
    return {
      no_check_items :[
        {name : '所有分类',
          valuelist :[{val : 'v1'},{val : 'v2'}]
        },
        {name : 'A',valuelist :[{val : 'v1'},{val : 'v2'}]},
        {name : 'B',valuelist :[{val : 'v1'},{val : 'v2'}]},
        {name : 'C'},
        {name : 'D'},
        {name : 'E'},
        {name : 'F'},
        {name : 'G'},
        {name : 'H'},
        {name : 'I'},
        {name : 'G'},
        {name : 'K'},
        {name : 'L'},
        {name : 'M'},
        {name : 'N'},
        {name : 'O'},
        {name : 'P'},
        {name : 'Q'},
        {name : 'R'},
        {name : 'S'},
        {name : 'T'},
        {name : 'U'},
        {name : 'V'},
        {name : 'W'},
        {name : 'X'},
        {name : 'Y'},
        {name : 'Z'},
      
      ],
      no_check_sindex :1,// 默认1  
    }
  }, 
  created() {
     // this init loading function 
  },
  methods: {
   dowm(index,name ){
    //将点击的元素的索引赋值给变量
    
    this.no_check_sindex = index;
}

	},
  comments: {},
  components:{}


}
</script>
 
<style scoped> 
.addclass_no{
   border-bottom: 3px solid #fb7299;
   color: #fb7299;
}
</style>