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


Posted in Javascript onJanuary 28, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

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

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
javascript 解析url的search方法
Feb 09 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
vue-for循环嵌套操作示例
Jan 28 #Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 #Javascript
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
JS实现的点击按钮图片上下滚动效果示例
Jan 28 #Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 #Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 #Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 #Javascript
You might like
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP session会话的安全性分析
2011/09/08 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
关于php中一些字符串总结
2016/05/05 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
jupyter notebook实现显示行号
2020/04/13 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
大学辅导员事迹材料
2014/02/05 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
创业计划书之校园超市
2019/09/12 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Python 统计序列中元素的出现频度
2022/04/26 Python
Java 多线程协作作业之信号同步
2022/05/11 Java/Android