Vue.js实现tab切换效果


Posted in Javascript onJuly 24, 2019

Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷。实际上,一直让Vue引以为豪的是它的便捷性、执行力、灵活性。

目前在学习Vue.js。在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM。他通过一些特殊的hmtl语法,将DOM和数据绑定起来。一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新。

下面是我用vue.js来实现的tab切换功能。

<!--这里是html结构-->
<div id="app">
    <ul>
      <li 
      v-for="(item,index) in tabs" 
      :class="{active:index == num}"
       @click="tab(index)">{{item}}</li>
    </ul>
    <div class="tabCon">
      <div 
      v-for='(itemCon,index) in tabContents' 
      v-show=" index == num">{{itemCon}}</div>
    </div>
  </div>
<!--这里是js代码-->
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data: {
    tabs: ["标题一", "标题二","标题三"],
    tabContents: ["内容一", "内容二","内容三"],
    num: 1
  },
  methods: {
    tab(index) {
      this.num = index;
    }
  }
});
</script>

使用vue.js实现tab切换很简单,先使用v-for把数据遍历渲染到页面上,v-for中有一个index表示索引,将index作为参数传入到tab(index)这个函数中,在data中定义一个num变量,在title中如果index==num,这个title就会添加一个acive的class。当然,这个num是需要在tab()这个函数中不断改变的,需要将传入的索引值赋值给num,这样在.tabCon里,我们就可以用v-show做下判断。v-show=”index==num”,如果等于的话,当前的内容就会显示。否则隐藏。

我感觉学习vue,首先把以前的那种传统思维转变过来是主要的,其次就是不断实践,不断的敲代码,才可以更深入的学习Vue.js。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
js实现简易计算器小功能
Nov 18 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 #Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 #Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 #Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 #Javascript
javascript关于“时间”的一次探索
Jul 24 #Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 #Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 #Javascript
You might like
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
smarty内置函数section的用法
2015/01/22 PHP
PHP的PDO连接讲解
2019/01/24 PHP
JavaScript修改css样式style
2008/04/15 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
token 机制和实现方式
2020/12/15 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
Python文件操作的面试题
2013/06/22 面试题
金融行业务员的自我评价
2013/12/13 职场文书
《落花生》教学反思
2014/02/25 职场文书
地理教师岗位职责
2014/03/16 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
领导干部失职检讨书
2015/05/05 职场文书
党员转正介绍人意见
2015/06/03 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
创业计划书之面包店
2019/09/12 职场文书
Python实现Hash算法
2022/03/18 Python
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技