最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么写一个滑动

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js写一个滑动的方法:

    第一步:写出HTML结构

    先写一个你需要展示的静态效果,写好后再改为VUE动态生成,代码如下:

    <div id="app1" class="wrap">
     <ul class="tabs">
     <li class="active"><a href="javascript:" >标签1</a></li>
     <li><a href="javascript:" >标签2</a></li>
     <li><a href="javascript:" >标签3</a></li>
     </ul>
     <div class="tabs-con">
     <p>内容1</p>
     </div>
     <div class="tabs-con">
     <p>内容2</p>
     </div>
     <div class="tabs-con">
     <p>内容3</p>
     </div>
    </div>

    第二步:写出css样式

    为你的结构写一个样式,代码如下:

    <style type="text/css">
     * {
     margin: 0;
     padding: 0;
     border-style: none;
     }
     ul,ol {
     list-style: none;
     }
     a {
     text-decoration: none;
     color: #777;
     }
     body {
     font: normal 14px/1.6 Helvetica,"Microsoft YaHei";
     color: #777;
     background-color: #f5f5f5;
     }
     .wrap {
     width: 600px;
     margin: 20px auto 0;
     }
     .tabs {
     overflow: auto;
     }
     .tabs li {
     float: left;
     }
     .tabs li a {
     display: block;
     padding: 10px 15px;
     color: #bbb;
     }
     .tabs li.active {
     background-color: #fff;
     }
     .tabs li.active a {
     color: #333;
     }
     .tabs-con {
     padding: 15px;
     background-color: #fff;
     }
    </style>

    第三步:写出js代码

    这一步是关键,要用到vue的内容了

    var app1 = new Vue ({
     el: '#app1',
     data: {
     //标签列表的数据,是数组,数组项是对象格式
     tabs: [
      {name:'标签1'},
      {name:'标签2'},
      {name:'标签3'}
     ],
     num: 0
     },
     //方法,建立自定义函数,对应点击时间onclick
     methods: {
     tabsSwitch(index) {
      //用到的变量要加上this,表示使用上面构造函数app1的对象num
      this.num = index;
     }
     }
    })

    第四步:更改上边的html结构

    <div id="app1" class="wrap">
     <ul class="tabs">
     <li v-for="(tab,index) in tabs" :class="{active:num===index}" @click="tabsSwitch(index)"><a href="javascript:">{{tab.name}}</a></li>
     </ul>
     <div class="tabs-con" v-show="num===0">
     <p>内容1</p>
     </div>
     <div class="tabs-con" v-show="num===1">
     <p>内容2</p>
     </div>
     <div class="tabs-con" v-show="num===2">
     <p>内容3</p>
     </div>
    </div>

    以上就是vue.js怎么写一个滑动的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么写一个滑动
    • 257会员总数(位)
    • 5897资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 540稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情