vue实现a标签点击高亮方法
如下所示:
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link href="css/style.css" rel="external nofollow" rel="stylesheet">--> <script src="js/jquery.js"></script> <script src="js/vue(2.0).js"></script> <style lang="less" rel="stylesheet/less"> .a { display: block; float: left; margin-left: 20px; } .active { color: red; font-size: 17px; } </style> </head> <body> <div id="app"> <a class="s-bt" @click="selected(Aname.name)" :class="{active: active == Aname.name}" v-for="Aname in Alist">{{Aname.name}}</a> </div> <script> new Vue({ el: '#app', data: { Alist: [{ name: '影视大咖' }, { name: '女明星' }, { name: '男明星' }, { name: '商业大亨' }], active: '' }, mounted() { }, methods: { selected(name) { this.active = name; } } }) </script> </body> </html>
以上这篇vue实现a标签点击高亮方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
您可能感兴趣的文章:
- vue 动态修改a标签的样式的方法
- 详解让sublime text3支持Vue语法高亮显示的示例
相关推荐
-
详解让sublime text3支持Vue语法高亮显示的示例
让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vue-syntax-highlight-master,其内所有文件备用. 2.将vue-syntax-highlight植入sbulime. 进入sublime,选择菜单项"Preferences->Browse Packages...&quo
-
vue 动态修改a标签的样式的方法
公司要做一个类似今日头条的项目,用前后端分离的方式做成HTML5页面,先在微信中运行,领导说想看看效果怎么样.今日头条头部的导航是可以滚动和添加类别的,我们这个项目也是一样.所以在导航这个地方就需要在点击不同分类的同时,样式也是跟着变的,我在网上搜索了一下,发现了下面的代码,简洁清淅,不过具体网址忘记了,先把代码贴出来给大家看一下,想知道网址的可以去网上搜索一下. <!DOCTYPE html> <html lang="en"> <head> <
-
vue实现a标签点击高亮方法
如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre
-
vue结合Echarts实现点击高亮效果的示例
本文主要介绍如何在vue中使用Echarts实现点击高亮效果. 1.首先看一下官方网站上的介绍: http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency 2.在初始化的时候绑定这两个事件.需要绑定的事件是鼠标的点击事件和右键点击事件. mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementBy
-
vue头部导航动态点击处理方法
1:DATA中两个变量, data: { nav:['头条1','头条2'], ins:0,//记录当前点击的INDEX }, 2: <div v-for="(item,index) in nav" :class="index == ins ? 'swiper-slide swiper_active' : 'swiper-slide' " @click="topClick(index)">{{item}}</div> 3:
-
vue实现tab栏点击高亮效果
本文实例为大家分享了tab栏实现点击高亮,供大家参考,具体内容如下 之前面试的时候被问到过如何使用vue实现tab栏切换高亮,今天自己写demo顺便记录一下 vue官方文档里有一个基础知识点叫做对象语法 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> //data如下 data: { isActive: true,
-
vue.js中关于点击事件方法的使用(click)
目录 关于点击事件方法的使用(click) vue点击click事件解析 关于点击事件方法的使用(click) 定义vue.js: <script src="../js/vue.min.js"> </script> 也可以使用网上的: <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 都可以. 定义方法: let vm=new
-
a标签调用js的方法总结
a标签点击事件方法汇总 <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段. 这里的href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ,其中javascript:是伪协议
-
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.在标签内写入点击
-
vue实现标签云效果的方法详解
本文实例讲述了vue实现标签云效果的方法.分享给大家供大家参考,具体如下: 闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a标签导致性能问题,于是svg就成了一个不错的选择. 标签初始化 这里实现的核心主要是参考了前面的那篇解析3D标签云的文章,作者给出了源码,讲解也比较通俗易懂.大体来说,整个代码分三步: 根据标签的数量,算出每个标签在球面上分
-
vue a标签点击实现赋值方式
如下所示: v-for="kf in kefu" function copy_fun(copy){ //参数copy是要复制的文本内容 上面的方法就可用了,亲测可用! 补充知识:VUE 给类似a标签加点击事件不跳转的问题 VUE的@click事件修饰符 运用: .prevent 阻止默认行为 <a href="url" rel="external nofollow" @click.prevent="myClick">
-
JS检测页面中哪个HTML标签触发点击事件的方法
本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要
随机推荐
- 举例讲解AngularJS中的模块
- 删除SVN三种方法delSvn(windows+linux)
- JS中关于事件处理函数名后面是否带括号的问题
- 详解Tomcat集群如何同步会话
- 详解Java中如何正确书写单例模式
- IOS开发过程中的消息通知--小红点
- PL/SQL number型数据
- Oracle关于时间/日期的操作
- javascript仿百度输入框提示自动下拉补全
- C#数据绑定控件中的DataSource属性浅谈
- C#中DateTime日期类型格式化显示方法汇总
- C/C++中提高查找速度的小技巧
- Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
- sql server的一个有趣的bit位运算分享
- javascript类型转换示例
- 基于TCP通信丢包原因总结(推荐)
- Java实现MD5消息摘要算法
- php中截取中文字符串的代码小结
- Angular中管道操作符(|)的使用方法
- Mybatis环境搭建和使用实例代码