Vue mouseenter mouseleave 切换V-for遍历的数组

<div v-for="(item,index) in platformNoticeAryover" :key="index"><div @clic

云墨cloudMel

4737人浏览 · 2018-09-14 17:21:42

云墨cloudMel · 2018-09-14 17:21:42 发布

 <div v-for="(item,index) in platformNoticeAryover" :key="index"> 
     <!-- <div @click="listClick(item,index,0)"> -->                 
     <div @click="listClick(item,index,0)" @mouseenter="mouseOver(index)" @mouseleave="mouseOut(index)">    
         <img class="consult_right_rigister_img" :src="item.img" alt="">
     </div>
</div>

<script>
export default {
    data() {
        return {
            platformNoticeAry: [
                {
                    img: require("../../assets/img/servers_a_01.png")
                },
                {
                    img: require("../../assets/img/servers_b_01.png")
                },
                {
                    img: require("../../assets/img/servers_c_01.png")
                },
                {
                    img: require("../../assets/img/servers_d_01.png")
                },
                {
                    img: require("../../assets/img/servers_e_01.png")
                }
            ], 
          platformNoticeAryover:[..........],
          platformNoticeAryon: [.........]
        }
    },
    methods:{
        mouseOver(index){
            this.platformNoticeAryover[index].img = this.platformNoticeAryon[index].img
        },
        mouseOut(index){
           this.platformNoticeAryover[index].img = this.platformNoticeAry[index].img
        }
   }
}
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^