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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
JS中min函数实例讲解
Feb 18 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
详解如何使用Node.js实现热重载页面
May 06 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预定义常量
2006/12/25 PHP
phpwind中的数据库操作类
2007/01/02 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
python实现简单温度转换的方法
2015/03/13 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
通俗讲解python 装饰器
2020/09/07 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
中职生自荐信
2013/10/13 职场文书
平安建设实施方案
2014/03/19 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2015年领班工作总结
2015/04/29 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
python字典进行运算原理及实例分享
2021/08/02 Python
JavaScript 定时器详情
2021/11/11 Javascript