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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
js 判断 enter 事件
Feb 12 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
vue实现a标签点击高亮方法
Mar 17 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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的autoload自动加载机制使用说明
2010/12/28 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
实现无刷新联动例子汇总
2015/05/20 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python导入库的具体方法
2020/06/18 Python
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
《青蛙看海》教学反思
2014/04/23 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
整改通知书格式
2015/04/22 职场文书
结婚司仪主持词
2015/06/29 职场文书
解析Java异步之call future
2021/06/14 Java/Android