vue.js仿hover效果的實(shí)現(xiàn)方法示例

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:01:21

vue.js仿hover效果的實(shí)現(xiàn)方法示例

vue.js仿hover效果的實(shí)現(xiàn)方法示例:本文實(shí)例講述了vue.js仿hover效果的實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title>

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue.js仿hover效果的實(shí)現(xiàn)方法示例:本文實(shí)例講述了vue.js仿hover效果的實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title>

本文實(shí)例講述了vue.js仿hover效果的實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

<!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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運(yùn)行效果：