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 相关文章推荐
动态加载script文件的两种方法
Aug 15 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
JS实现随机点名器
Apr 12 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Python元组常见操作示例
2019/02/19 Python
Python发送邮件实现基础解析
2020/08/14 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
精彩的英文自荐信
2014/01/30 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
公司保洁员管理制度
2015/08/04 职场文书
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL