vue鼠標懸浮切換文字和圖片

今天寫頁面是需要一個功能，列表全部顯示圖片，鼠標懸浮后顯示文字，未懸浮的顯示圖片，始終有一項顯示為文字

 

 

當鼠標懸浮至其他項時，如果不對其他項進行鼠標懸浮操作，鼠標移開后，該項依舊顯示文字

 

 

 

<div v-for="(item, index) in itemList">
     <label>{{ item.name }}</lable>
     <label><img :src="require('../../assets/images/base/'+ item.url + '_normal.png')"></lable>
 </div>

因為圖片是不同的，所以url地址不能寫死

在export default 的data中輸入以下內容：

url為你圖片的url名稱

data () {
      return {
        itemList: [
          { index: 1, name: '風速', url: '1033' },
          { index: 2, name: '空氣溫度', url: '1001' },
          { index: 3, name: '空氣濕度', url: '1002' },
          { index: 4, name: '露點', url: '1036' },
          { index: 5, name: '光照強度', url: '1030' },
          { index: 6, name: '紫外線強度', url: '1031' },
          { index: 7, name: '光合有效輻射', url: '1032' },
          { index: 8, name: '風向', url: '1034' },
          { index: 9, name: '雨量', url: '1035' },
        ],
      }
    },

頁面將會把所有內容通過v-for循環渲染，

給節點加鼠標懸浮事件，以及label的動態v-show

<div v-for="(item, index) in itemList"
　　　　　　　　:key="index"
　　　　　　　　:value="item.value"
　　　　　　　　:label="item.label"　

            @mouseenter="enters(index)">    <!--新增鼠標懸浮事件-->

　　 <label v-show="switchNice[index].arry">{{ item.name }}</lable> 
　　 <label v-show="switchNice[index].arrys"><img :src="require('../../assets/images/base/'+ item.url + '_normal.png')"></lable> 

</div>

<!-- 在data中添加swicthNice，綁定vue中的v-show，swicthNice的數組長度和itemList數組長度一致 -->
switchNice: [
  { arry: true, arrys: false },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true }
],


methods: {
　　

enters(index) {
  this.switchNice[index].arrys = false;  // 當前鼠標懸浮所在的圖片隱藏
  for (let m = 0; m < this.switchNice.length; m++) { // 循環switchNice數組
    if (m === index) {
      this.switchNice[m].arry = true;  // 當數組和index相同時，文字顯示
    } else {  // 不同時，圖片顯示，文字隱藏
      this.switchNice[m].arry = false;
      this.switchNice[m].arrys = true;
    }
  }
},

}

 

 

如果需要鼠標懸浮顯示文字，鼠標退出，顯示圖片，可以給div在加一個鼠標離開事件

@mouseleave="leaver(index)

methods： {
　　leaver(index) {
  　　this.switchNice[index].arry = false; // 文字隱藏
　　　this.switchNice[index].arrys = true; //圖片顯示
}, }

上面的鼠標懸浮enters事件也需要改成下列內容

methods： {
　　enters(index) {

　　　this.switchNice[index].arrys = false; //圖片隱藏
     this.switchNice[index].arry = true; // 文字顯示

}, }