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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php提高网站效率的技巧
2015/09/29 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
js加解密 脚本解密
2008/02/22 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
个人简历自我评价八例
2013/10/31 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
退休感言
2014/01/28 职场文书
医药销售自荐书
2014/05/29 职场文书
2014年个人委托书范本
2014/10/13 职场文书
聘任书范文大全
2015/09/21 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP