vue.js仿hover效果的实现方法示例
本文实例讲述了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程序设计有所帮助。
相关推荐
-
vue使用v-for实现hover点击效果
使用Vue来实现鼠标悬停效果.可以使用事件处理器v-on指令(简写为:@)来完成.为标签绑定mouseenter以及mouseleave事件即可. hover是css中的选择器,用于选择鼠标指针浮动在上面的元素.所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式. 在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变
-
vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(
-
vue2.0中click点击当前li实现动态切换class
1,文件内容 ----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法. 看详解:https://cn.vuejs.org/v2/api/#Vue-set <template> <div> <ul> <li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class=&
-
Vue实现点击后文字变色切换方法
这里用文字举例,图片切换的原理也是一样的 大概思路是:用两个class相同的span分别是切换前后的文字,class相同主要是为了变换前后的文字位置相同.然后用click事件控制它们的显隐. 代码如下: HTML: <span class="response" v-show="!showCommentInput" @click="showCommentInput = !showCommentInput">回复</span>
-
vue获取当前点击的元素并传值的实例
html: <span @click='zan(pl.id)' :data-id='pl.id'></span> js: zan(e){ var target=event.target; var dataid=e;//(pl.id的值); $(target)//当前点击的dom } 以上这篇vue获取当前点击的元素并传值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中兄弟组件之间互相传值实例 vue.js获得
-
vue实现列表的添加点击
本文实例为大家分享了vue实现列表的添加点击,供大家参考,具体内容如下 使用指令:v-on v-for v-on v-bind v-model html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js</title> <style> body {font-family: &quo
-
Vue实现active点击切换方法
循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click="active(index)" 2.将索引值传入class(索引等于几就第几个添加active类) :class="{active:index==ins}" 3.在data里边添加ins:0(表示默认第一个添加active类) data{ ins:0 } 4.最后在methods里边添加方法 ctive (num) { this.ins=num } 非循环的情况: 1.在标签内写入点击
-
vueJS简单的点击显示与隐藏的效果【实现代码】
目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好 感觉跟适合. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if.v-else.v-show&l
-
vue.js仿hover效果的实现方法示例
本文实例讲述了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:
-
vue.js中实现登录控制的方法示例
本文实例讲述了vue.js中实现登录控制的方法.分享给大家供大家参考,具体如下: vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的. 首先我们需要编写登录页面和主页面: <template> <div class="login"> <table width="100%" height="100%"> &l
-
Vue.js组件间的循环引用方法示例
什么是组件: 众所周知组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展.下面话不多说了,来一起看看本文的正文内容. 引言 写了大大小小不少基于vue的项目,但是基本没用到过组件循环引用的知识. 为了查缺补漏,照着官方文档撸一个DEMO:组件之间的循环引用 本人的运行版本为 vue-cli@2.8.1,启用项目后,将以下 js 文件
-
在vue.js中抽出公共代码的方法示例
前言 当我们在使用vue构建中大型项目时,通常会遇到某些经常用的方法以及属性,比如说搭建一个员工管理系统,请求的url需要一个共同的前缀,或者在某几个view中需要用到时间,这个时间是通过某方法格式化之后的等等,如果每次用到都写共同的代码,那样如果之后有变动的话维护起来会非常麻烦. 所以我们就得想办法抽出公共代码,因为vue是组件化开发,我们就会很自然的与es6的module模块化联系到一起.其实当我们在搭建项目结构时就应该先提前埋下伏笔,有一个util文件夹,里面放的就是我们要写的公共代码,其
-
Vue.js仿Select下拉框效果
本文实例为大家分享了Vue.js仿Select下拉框效果的具体代码,供大家参考,具体内容如下 废话少说,直接上图上代码: 效果图: HEML: <div id="demo"> <h2 class="title">自定义下拉框</h2> <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-se
-
Vue.js实现拖放效果的实例
页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>
-
Vue.js仿微信聊天窗口展示组件功能
源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍 支持文本和图片的展示(后续将
-
基于vue.js无缝滚动效果
一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(
-
Vue.js实现图片的随意拖动方法
主要代码如下: <template> <div id="test_3"> <img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style"> </div> </template> <s
-
vue.js中mint-ui框架的使用方法
本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header
随机推荐
- 正则表达式对qq号码校验
- win32安装配置非安装版的MySQL
- Angular.js中下拉框实现渲染html的方法
- 运营内部PPT分享:通俗易懂聊运营
- Swift心得笔记之运算符
- js 多种变量定义(对象直接量,数组直接量和函数直接量)
- 纯javascript移动优先的幻灯片效果
- 开发跨浏览器的JavaScript方法说明第1/2页
- C#使用checkedListBox1控件链接数据库的方法示例
- 在Python中处理字符串之ljust()方法的使用简介
- 基于PHP实现短信验证码接口(容联运通讯)
- Android获取内置sdcard跟外置sdcard路径
- MySQL索引操作命令详解
- elgg 获取文件图标地址的方法
- CSS教程之CSS的应用
- 收集的WML Script标准函数库第1/3页
- JSP过滤器Filter配置过滤类型全部汇总
- SQL Server Table中XML列的操作代码
- jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
- Android Handler工作原理解析