Vue 控制鼠標移入移出事件文字的隱藏和顯示

1,要實現的效果就是文字A和文字B通過鼠標移入移出事件，使他們在界面上交替顯示，就如同鼠標移入顯示文字A，鼠標移出顯示文字B.

2,這個功能主要用v-for循環，和數組循環實現。

首先我先建立一個數組，把框架搭建好。

 

 <div
      v-for="(arry, index) in itemse"
      :key="arry.index"
      :value="arry.value"
      :label="arry.label"
    >
      <label>{{ arry.name }}</label>
      <label>{{ arry.text }}</label>
    </div>

<script>
export default {
  data() {
    return {
      itemse: [
        { index: 1, name: "糖果", text: "阿爾卑斯" },
        { index: 2, name: "水果", text: "蘋果" }
      ]
    };
  },
  methods: {}
};
</script>

然后現在的樣式就是這樣子的了，

 

 現在需要加入移入移出事件@mouseenter=“enters(index)” @mouseleave=“leaver(index)”，達到最初想要的效果

 

 <div
      v-for="(arry, index) in itemse"
      :key="arry.index"
      :value="arry.value"
      :label="arry.label"
      @mouseenter="enters(index)"
      @mouseleave="leaver(index)"
    >
      <label v-show="switchNice[index].arry">{{ arry.name }}</label>
      <label v-show="switchNice[index].arrys">{{ arry.text }}</label>
    </div>

 

 

<script>
export default {
  data() {
    return {
      itemse: [
        { index: 1, name: "糖果", text: "阿爾卑斯" },
        { index: 2, name: "水果", text: "蘋果" }
      ],
      switchNice: [
        //這綁定了上面V-show,
        {
          arry: true,
          arrys: false
        },
        {
          arry: true,
          arrys: false
        },
        {
          arry: true,
          arrys: false
        }
      ]
    };
  },
  methods: {
    enters(index) {
      this.switchNice[index].arry = false; //這里的先后順序如果寫反了 就會一直閃，這是根據上面那個思路寫的，
      this.switchNice[index].arrys = true; //鼠標移入 首先是A先消失，然后B再出現的，寫反就會瘋狂閃。
    },
    leaver(index) {
      this.switchNice[index].arrys = false; //移出時也一樣，先B消失 再出現A。
      this.switchNice[index].arry = true;
    }
  }
};
</script>

現在的樣式是：

移入前：  移入后：

 

大功告成