vue.js仿hover效果的实现方法示例
更新时间：2019年01月28日 11:34:27 作者：s_psycho
这篇文章主要介绍了vue.js仿hover效果的实现方法,结合实例形式分析了vue.js事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行效果：
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要介绍了vue3 hook自动导入的原理,介绍了API的自动导入及组件的自动导入，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了优雅的将ElementUI表格变身成树形表格的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
在做单页面应用程序时，一般页面布局头尾两块都是固定在布局页面，中间为是路由入口。这篇文章主要介绍了vue-router 通过路由来实现切换头部标题 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue 使用OSS上传图片或附件讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了vue-router如何实时动态替换路由参数(地址栏参数)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue+element-ui 校验开始时间与结束时间的实现代码
这篇文章主要介绍了vue+element-ui 校验开始时间与结束时间的代码实现,最主要的需求是开始时间不能早于当前时间,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要为大家介绍了Create vite理解Vite项目创建流程及代码实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家详细介绍了Vue实现本地购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要给大家介绍了关于vue动态合并单元格并添加小计合计功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了JS 实现获取对象属性个数的方法,结合实例形式总结分析了JS 获取对象属性个数的三种常用方法,需要的朋友可以参考下2023-05-05
最新评论