vue 动态修改a标签的样式的方法


Posted in Javascript onJanuary 18, 2018

公司要做一个类似今日头条的项目,用前后端分离的方式做成HTML5页面,先在微信中运行,领导说想看看效果怎么样。今日头条头部的导航是可以滚动和添加类别的,我们这个项目也是一样。所以在导航这个地方就需要在点击不同分类的同时,样式也是跟着变的,我在网上搜索了一下,发现了下面的代码,简洁清淅,不过具体网址忘记了,先把代码贴出来给大家看一下,想知道网址的可以去网上搜索一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active{
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <button v-for='item in isp' @click='f1($index)' 
    :class="{'active': $index === isActive}">{{item}}</button>
  </div>

  <script type="text/javascript" src='vue.js'></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        isActive:0,
        isp: ['BGP','中国电信','中国联通','联通电信双线']
      },
      methods:{
        f1:function(index){
          this.isActive=index
        }
      }
    })
  </script>
</body>
</html>

像下面这样:

vue 动态修改a标签的样式的方法

vue 动态修改a标签的样式.jpeg

下面是我项目中的代码:

上面的代码,作者用的是vue 1.0版本,下面我用的是2.0版本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .red-link{
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <a href="javascript:void (0);" rel="external nofollow" class="box1-item" 
       v-for="(item, index) in menu"
       :class="{ 'red-link':index === isActive }" 
       v-on:click.stop.prevent='switchTab(index)'>
       {{ item }}
    </a>
  </div>

  <script type="text/javascript" src='vue.js'></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        isActive:0,
        menu: ['推荐', '人物', '干货', '行业', '融资','�教育','大数据'],
      },
      methods:{
        switchTab: function (index) {
          this.isActive = index;
        }
      }
    })
  </script>
</body>
</html>

代码基本一样,只是自己整理一下,方便下次使用的时候好找,也希望需要的朋友能拿来就用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
详解tween.js的使用教程
Sep 14 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 #Javascript
Nuxt.js踩坑总结分享
Jan 18 #Javascript
Nuxt.js实战详解
Jan 18 #Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 #Javascript
ajax请求data遇到的问题分析
Jan 18 #Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 #Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 #Javascript
You might like
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Django自定义分页效果
2017/06/27 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
详解python程序中的多任务
2020/09/16 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
员工培训邀请函
2014/01/11 职场文书
优秀员工推荐信
2014/05/10 职场文书
影子教师研修方案
2014/06/14 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
冰雪公主观后感
2015/06/16 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
iPhone13再次曝光
2021/04/15 数码科技
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
JavaScript实现简单计时器
2021/06/22 Javascript
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫