<template>
  <div class="dev">
   
    <div v-for = "(item,i) in items"  :class = "active == i ? 'addclass' : '' " @mouseover='dowm(i)' :key="i">

      { { item.name}} ===============  { { i}}

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

<script>
export default { 
  name: 'dev',
  data () { 
    return { 
      items :[
        { 
        name  : '点我1',
        },
        { 
        name  :'点我2',
        },
        { 
        name : '点我3',
        }
      ],
      active : -1
    }
  }, 
  created() { 
     // this init loading function 
  },
  methods: { 
   dowm(index){ 
    //将点击的元素的索引赋值给变量
    
    this.active = index;
}

	},
  comments: { },
  components:{ }


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