vuejs实现标签选项卡动态更改css样式的方法

2024-12-26 14:12:17

html

<ul class="header-list">
    <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}">{{item.name}}</a></li>
</ul>

var app = new Vue({
    el:"#app",
    router,
    data:{
      m:"hello vue.js",
      active:'2',
      idx:'0',  //默认选择首页
      headerList:[
        {name:'首页1'},
        {name:'首页2'},
        {name:'首页3'},
        {name:'首页4'},
        {name:'首页5'},
        {name:'首页6'}
      ]
    },
    methods:{
      // 1.选择
      selectMainTheme:function(index){
        console.log("selectMainTheme" + index);
        console.log("idx" + this.idx);
        this.idx = index;
      }
      //
    }
});

总结

以上所述是小编给大家介绍的vuejs实现标签选项卡动态更改css样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Vue.js组件tab实现选项卡切换

本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:
Vue学习之路之登录注册实例代码

根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev Vue.js 主要目录结构 . ├
vue实现选项卡及选项卡切换效果

这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过头来看我的实现代码.记住,通读Vue文档真的很重要,很重要! 这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化,客官不要着急! 下面是一个样式稍微丑陋,但功能OK的选项卡. <!DOCTYPE html> <html> <head> <meta c
使用vue.js写一个tab选项卡效果

通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti
vue选项卡切换登录方式小案例

本文实例为大家分享了vue选项卡切换登录方式的具体代码,供大家参考,具体内容如下最终效果组件代码: <template> <div> <div class="login_warp"> <div class="loginbox fl">  <div class="login_header"> <span @click="cur
vue实现登录后页面跳转到之前页面

在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.
vue插件tab选项卡使用小结

本文实例为大家分享了vue插件tab选项卡的使用方法,供大家参考,具体内容如下基本用法 <template> <tab :options="tabOpt" :state.sync="stateIndex"></tab> </template> <script type="text/babel"> import tab from 'components/tab_touch'; expor
Vue.js组件tabs实现选项卡切换效果

今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents">  <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di
Vue.js tab实现选项卡切换

本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo
vue中用动态组件实现选项卡切换效果

最近在研究vue的路上,那么今天也算个学习笔记吧! 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"><router-link

vuejs实现标签选项卡动态更改css样式的方法

相关推荐

随机推荐