Vue练习十六：02_10_提示框效果

Demo 在线地址：
https://sx00xs.github.io/test/16/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<template>
  <div id=app>
    <div class=outer>
      <h2>名车车标展示-鼠标移过显示车标</h2>
      <ul>
        <li  v-for="(item,index) in lists" :key=item.title :class="{zindex:item.isActive}">
          <a href=# :title=item.title
          @mouseover="handleAover(index)"
          @mouseout="handleAout(index)"
          ><strong>{{item.name}}</strong>{{item.val}}</a>
          <img
          @mouseover="handleAover(index)"
          @mouseout="handleAout(index)"
           :class="{current:item.isActive}" :src=item.src :alt=item.title>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      lists:[
        {
          title:'BMW 宝马汽车',
          name:'BMW',
          val:'宝马汽车',
          src:require('./assets/lesson2/1.jpg'),
          isActive:false,
        },

        {
          title:'Alfa Romeo 阿尔法-罗米欧',
          name:'Alfa Romeo',
          val:'阿尔法-罗米欧',
          src:require('./assets/lesson2/2.jpg'),
          isActive:false,
        },

        {
          title:'Skoda 斯柯达',
          name:'Skoda',
          val:'斯柯达',
          src:require('./assets/lesson2/3.jpg'),
          isActive:false,
        },

        {
          title:'Volkswagen 大众汽车',
          name:'Volkswagen',
          val:'大众汽车',
          src:require('./assets/lesson2/4.jpg'),
          isActive:false
        },

        {
          title:'Saab 萨布牌轿',
          name:'Saab',
          val:'萨布牌轿',
          src:require('./assets/lesson2/5.jpg'),
          isActive:false,
        },

        {
          title:'Lamborghini 兰博基尼',
          name:'Lamborghini',
          val:'兰博基尼',
          src:require('./assets/lesson2/6.jpg'),
          isActive:false,
        },

        {
          title:'Porsche 保时捷',
          name:'Porsche',
          val:'保时捷',
          src:require('./assets/lesson2/7.jpg'),
          isActive:false,
        },

        {
          title:'Peugeot 标致',
          name:'Peugeot',
          val:'标致',
          src:require('./assets/lesson2/8.jpg'),
          isActive:false,
        },

        {
          title:'Mercedes1 梅赛德斯 奔驰',
          name:'Mercedes1',
          val:'梅赛德斯 奔驰',
          src:require('./assets/lesson2/9.jpg'),
          isActive:false,
        },

        {
          title:'Buick 别克汽车',
          name:'Buick',
          val:'别克汽车',
          src:require('./assets/lesson2/10.jpg'),
          isActive:false,
        }
      ]
    }
  },
  methods:{
    handleAover(index){
      this.lists[index].isActive=true;

},
    handleAout(index){
      this.lists[index].isActive=false;

}
  }
}
</script>

标签：02,10,Vue,false,name,val,lesson2,jpg,isActive
来源： https://www.cnblogs.com/sx00xs/p/11266033.html