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 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
javascript 闭包
Sep 15 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 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程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
餐厅执行经理岗位职责范本
2014/02/26 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
技术员个人工作总结
2015/03/03 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
网络研修心得体会
2016/01/08 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏