<div class="vuedemo">
<div class="all">
<div class="tabone" v-bind:class="idns==0?'no':''" v-on:click="idns=0">tab1</div>
<div class="tabone" v-bind:class="idns==1?'no':''" v-on:click="idns=1">tab2</div>
<div class="tabone" v-bind:class="idns==2?'no':''" v-on:click="idns=2">tab3</div>
</div> <div class="vue " v-bind:class="idns==0?'yes':''">list1</div>
<div class="vue" v-bind:class="idns==1?'yes':''">list2</div>
<div class="vue" v-bind:class="idns==2?'yes':''">list3</div>
</div>

js

<script>
new Vue({
el: '.vuedemo',
data: {
idns:0
},
methods:{
var that = this;
      that.fa(); 
},
    methods:{
      fa: function(){
      }
    }
})
</script>

style

     .all{
  overflow: hidden;
}
.tabone{
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: darkorange;
} .vue{
width: 150px;
height: 50px;
background: silver;
display: none;
line-height: 50px;
text-align: center;
}
.vue.yes{
display: block;
}
.yes{
color: white;
}
.no{
background: darkblue;
color: white;
}

前端vue 里的tab切换 减少dom操作的更多相关文章

  1. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  2. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  3. 前端页面卡顿、也许是DOM操作惹的祸?

    界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...

  4. Web前端开发最佳实践(13):前端页面卡顿?可能是DOM操作惹的祸,你需要优化代码

    文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScri ...

  5. web性能优化--减少DOM操作(三)

    减少DOM数量 减少DOM操作 批量处理DOM操作 批量处理样式修改 尽量不要使用tabel布局 尽量不要使用css表达式 string用数组join css选择符优化 1.减少DOM数量 在HTML ...

  6. vue.cli实现tab切换效果

    <template> <div class="cp-select">                     <div class="lef ...

  7. vue + element-ui 制作tab切换(切换vue组件,踩坑总结)

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  8. vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)

    本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...

  9. vue里的tab控件

    如下图,v-model绑定的值,这个值在js里一旦改变,视图就会切换到相应的tab页,这意味着一定要先给tab页内容数据赋值,再改变这个tabsIndex的值 如下图,先赋值data列表数据,在更改t ...

随机推荐

  1. 計蒜客/數正方形(dp)

    題目鏈接:https://nanti.jisuanke.com/t/44 題意:中文題誒~ 思路: 用dp[i][j]存儲以(i, j)爲左上定點的最大正方形變長,從右下角網左上角一次計算所有頂點: ...

  2. 洛谷P1291 百事世界杯之旅

    P1291 百事世界杯之旅 题目描述 “……在2002年6月之前购买的百事任何饮料的瓶盖上都会有一个百事球星的名字.只要凑齐所有百事球星的名字,就可参加百事世界杯之旅的抽奖活动,获得球星背包,随声听, ...

  3. Spring Cloud:使用Ribbon实现负载均衡详解(上)

    1. 什么是 Ribbon? Spring Cloud Ribbon 是一套实现客户端负载均衡的工具.注意是客户端,当然也有服务端的负载均衡工具,我们后面再介绍.可以认为 Ribbon 就是一个负载均 ...

  4. STP-5-STP配置及分析

    拓扑: root id列出了根的网桥id为两部分,前边是优先级,后边跟着mac地址,cost 0 暗示sw1就是根: 下边的命令确认sw1就是vlan1的根: 下边,sw2配置了一个比sw1更低的优先 ...

  5. __next__,__iter__实现迭代器,斐波那契数列

    迭代器__next__,__iter__ 基于__next__和__iter__方法实现的迭代器 class Foo: def __init__(self,n): self.n = n def __i ...

  6. 问题: 查看某个文件的修改记录| git log 高级用法

    参考文章: git查看某个文件的修改历史 5.3 Git log 高级用法 基本步骤 git log --pretty=oneline [文件名] git show [节点] git log 两周高级 ...

  7. 涉及到弹出层的opacity样式问题

    最近遇到一个弹出层在Chrome中重复的问题,观察发现是opacity引起的以下是代码及现象<!DOCTYPE html><html> <head>         ...

  8. Android5.0以上版本录屏实现

    我录屏的方式是分别录制音频和视频,最后合并成mp4格式,比较麻烦,因为网上完整的教程比较少,所以我打算写一个完整版的,照着我的代码写完之后,至少是能够实现功能的,而不是简单的介绍下用法. 1既然是录制 ...

  9. Fragment 创建及替换

    1.Fragment的产生与介绍 Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后拷贝一份,修改布局以适应 ...

  10. 闹心的CSDN

    近来搜索技术文章时,每次来到csdn上时,显示全文就提示登陆. 唉登陆就登陆吧,记不清账号了,就用手机号获取验证码.然后更改密码.我靠,密码居然要8位以上,要有大小写字母.数字和标点符号的组合... ...