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 相关文章推荐
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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音乐采集(部分代码)
2007/02/14 PHP
PHP中cookies使用指南
2007/03/16 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python中for循环详解
2014/01/17 Python
python实现保存网页到本地示例
2014/03/16 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
pycharm永久激活超详细教程
2020/10/29 Python
python入门教程之基本算术运算符
2020/11/13 Python
幼儿园小班植树节活动方案
2014/03/04 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
国富论读书笔记
2015/06/26 职场文书
初中政治教师教学反思
2016/02/23 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
Python基于百度AI实现抓取表情包
2021/06/27 Python
python字典进行运算原理及实例分享
2021/08/02 Python