vue.js仿hover效果的实现方法示例

2019-11-19 12:12:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了vue.js仿hover效果的实现方法。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{      margin: 0;      padding: 0;      list-style: none;    }    ul{      margin:100px ;    }    li{      width: 50px;      height: 50px;      border: 1px solid;      float: left;      text-align: center;      line-height: 50px ;    }    .act{      background: red;    }  </style></head><body><ul id="app">  <li @click="fun(x)" v-for="x in num" :class="index===x?'act':''">{{x}}</li></ul></body><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><script>  const app=new Vue({    el:"#app",    data:{      num:10,      index:1,    },    methods:{      fun(x){        this.index=x      }    }  })</script></html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.VeVB.COm/code/HtmlJsRun测试上述代码，可得如下运行效果：