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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
详解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添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
Vuejs实现购物车功能
2017/11/05 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Python实例一个类背后发生了什么
2016/02/09 Python
python去掉行尾的换行符方法
2017/01/04 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
python线程中同步锁详解
2018/04/27 Python
Python rstrip()方法实例详解
2018/11/11 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
django框架创建应用操作示例
2019/09/26 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
建国大业观后感800字
2015/06/01 职场文书
联村联户简报
2015/07/21 职场文书
2016年元旦寄语
2015/08/17 职场文书
人民币使用说明书
2019/04/17 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript