前端vue 里的tab切换 减少dom操作
<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操作的更多相关文章
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- Vue.js实现tab切换效果
利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...
- 前端页面卡顿、也许是DOM操作惹的祸?
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...
- Web前端开发最佳实践(13):前端页面卡顿?可能是DOM操作惹的祸,你需要优化代码
文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScri ...
- web性能优化--减少DOM操作(三)
减少DOM数量 减少DOM操作 批量处理DOM操作 批量处理样式修改 尽量不要使用tabel布局 尽量不要使用css表达式 string用数组join css选择符优化 1.减少DOM数量 在HTML ...
- vue.cli实现tab切换效果
<template> <div class="cp-select"> <div class="lef ...
- vue + element-ui 制作tab切换(切换vue组件,踩坑总结)
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
- vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
- vue里的tab控件
如下图,v-model绑定的值,这个值在js里一旦改变,视图就会切换到相应的tab页,这意味着一定要先给tab页内容数据赋值,再改变这个tabsIndex的值 如下图,先赋值data列表数据,在更改t ...
随机推荐
- 2.Python基础认识(格式化输出,while语句,运算符,编码,单位转化)
Python基础认识 1.字符串的格式化初识及占位符的简单应用 字符串的格式化 按照既定的要求进行有规定排版的一种输出方式. #我们想要输出的格式如下: ----------------------- ...
- 单片机的C语言中位操作用法
在对单处机进行编程的过程中,对位的操作是经常遇到的.C51对位的操控能力是非常强大的.从这一点上,就可以看出C不光具有高级语言的灵活性,又有低级语言贴近硬件的特点.这也是在各个领域中都可以看到C的重要 ...
- VLAN-6-VLAN Trunk协议(VTP)
VTP能够将VLAN配置信息通告给邻居交换机,这样做可以使工程师只在一台交换机上配置VLAN,同一个VTP域中的所有其他交换机动态学习这些VLAN信息.VTP通告VLAN ID.VLAN 名称和 VL ...
- Spring+Quartz配置定时任务
一.Quartz介绍 在企业应用中,我们经常会碰到时间任务调度的需求,比如每天凌晨生成前天报表,每小时生成一次汇总数据等等.Quartz是出了名的任务调度框架,它可以与J2SE和J2EE应用程序相结合 ...
- nodejs学习(3) express+socket.io
//node var express=require('express'); var app = express(); var server = require('http').createServe ...
- ActiveMQ与RocketMQ对比
ActiveMQ RabbitMQ RocketMq ZeroMQ 关注度 高 高 中 中 成熟度 成熟 成熟 比较成熟 不成熟 所属社区/公司 Apache MozillaPublic ...
- js实现屏幕自适应局部
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- xml和TreeView
1.TreeView代码代码: private void Form1_Load(object sender, EventArgs e) {<br> //代码为TreeView添加子项 tr ...
- TLS、SSL、HTTPS以及证书
转自:http://www.cnblogs.com/kyrios/p/tls-and-certificates.html 最近在研究基于ssl的传输加密,涉及到了key和证书相关的话题,走了不少弯路, ...
- cacti添加被监控机全过程
在被监控端上的操作: 1.在被监控机器上root目录下建立文件 test.sh chmod 777 test.sh cat test #!/bin/bash echo $RANDOM 2.在snmpd ...