<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. app发布证书、真机调试证书、测试证书、推送证书详细过程

    原文网址: http://www.cnblogs.com/cxbblog/p/4028159.html 一:发布证书 遵旨:哪个开发者的哪台电脑要发布哪个app (这句话可以多读几遍) 通过上边的遵旨 ...

  2. export default 和 export 的使用方式(六)

    一:ES6 的导入模块方式和暴露对象方式: ES6 中导入模块使用:import 模块名称 from '模块标识符':import '表示路径': 在 ES6 中使用 export default 和 ...

  3. dbutils下载

  4. StringUtils.split()和string.split()的区别

    场景 出于业务考虑,将多个字符串拼接起来时,使用的分隔符是;,;.如果要将这样一个拼接来的字符串分割成原本的多个字符串时,就需要使用到jdk自带的split()方法.不过因为公司的编程规范,改为使用了 ...

  5. 115 Distinct Subsequences 不同子序列

    给定一个字符串 S 和一个字符串 T,求 S 的不同的子序列中 T 出现的个数.一个字符串的一个子序列是指:通过删除一些(也可以不删除)字符且不干扰剩余字符相对位置所组成的新字符串.(譬如," ...

  6. oracle GROUP BY rollup

    1.ROW_NUMBER() OVER函数的基本用法用法 http://www.cnblogs.com/fxgachiever/archive/2010/09/15/1826792.html 2.De ...

  7. 回顾Quick Sort(Javascript 实现)

    Introduction QuickSort的时间复杂度渐近函数虽然不能达到MergeSort般的O(nlgn),但因其良好的时间常量以及平均运行时间而被广泛使用. 下图解释了QuickSort的过程 ...

  8. cf580E. Kefa and Watch(线段树维护字符串hash)

    题意 $n$个数的序列,$m + k$种操作 1.$l , r, k$把$l - r$赋值为$k$ 2.$l, r, d$询问$l - r$是否有长度为$d$的循环节 Sol 首先有个神仙结论:若询问 ...

  9. 重置Cacti密码

    Cacti登录密码忘记,重置Cacti密码 用root用户进入系统 [root@localhsot]# mysql -u root -p mysql> show databases; mysql ...

  10. Clown without borders 2017/1/10

    原文 You'll laugh, you'll cry It's aesy to imaginehow the activities of CWB produce many emotional and ...