Vue实现选项卡tab切换制作

本文实例为大家分享了Vue实现选项卡tab切换制作代码，供大家参考，具体内容如下

1.主要的实现功能如下:(点击进行切换,这里我不做太多的样式处理了,主要看功能)

2.话不多说:主要看代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡制作</title>
    <!--js文件记得用自己的-->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
    <div id="xuanxiang" style="text-align: center;margin: 0 auto;width: 500px;">
        <div>
            <ul style="list-style-type: none" >
                <li style="float: left;
                           width: 130px;
                           display: block;
                           margin-top: 40px;
                           margin-right: 10px;
                           margin-bottom: 0px;
                           background-color: aquamarine;
                           line-height: 30px;
                           border-radius: 15px 15px 0 0;
                           color: blueviolet;
                           :hover{background-color: blueviolet;
                                    color: aliceblue;}"
 
                    v-for="(item,index) in arr" @click="changes(index)">{{ item.xuan }}</li>
            </ul>
        </div>
        <div style="text-align: center;margin: 0 auto;float: left;margin-top: 80px;background-color: antiquewhite;width: 500px;text-align: center;height: 100px;
                        margin-top: 0px;
                        vertical-align: middle;display: table-cell;">
            <p>{{ valuessss }}</p>
        </div>
    </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js实现选项卡切换

    vue.js实现选项卡切换

    因为前端课要交一个大作业,刚好工作室的项目需要一个后台管理界面,就自学了一下vue,今天做了一个选项卡切换,最开始的作为菜鸡是用的js做的,太难了T.T,后面学了bootstrap就直接用的组件.今天用了感觉太棒了!比bootstrap的组件好用!!! 一.实现原理 我是用的点击事件进行更改data数据的值,v-if指令根据数据的变化来显示/隐藏内容的 1.设置1个content数组,用来存储6个选项内容是否显示的boolean值,默认第一个显示 new Vue({   el:".body&qu

  • Vue.js组件实现选项卡以及切换特效

    Vue.js组件实现选项卡以及切换动画特效,供大家参考,具体内容如下 最近在学习Vue,当看梁灏大神写的<Vue.js实战>时看到了关于用组件实现选项卡功能,我也根据课后的练习加上自己的理解重新编写了一下. 组件分为pane.js和tabs.js两个部分,话不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

  • vue实现选项卡及选项卡切换效果

    vue实现选项卡及选项卡切换效果

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

  • 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实现Tab选项卡切换

    Vue实现Tab选项卡切换

    本文实例为大家分享了Vue实现Tab选项卡切换的具体代码,供大家参考,具体内容如下 点击不同的标题显示出相应的图片 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m

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

    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动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

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

  • 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

  • vue选项卡切换登录方式小案例

    vue选项卡切换登录方式小案例

    本文实例为大家分享了vue选项卡切换登录方式的具体代码,供大家参考,具体内容如下 最终效果 组件代码: <template> <div> <div class="login_warp"> <div class="loginbox fl"> <!-- 三个选项卡按钮 --> <div class="login_header"> <span @click="cur

随机推荐