1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. 	<meta charset="UTF-8" />
  5. 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. 	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. 	<title>根据循环出来的列表中的索引值 进行点击当前项为当前点击项进行样式的添加(实现排他思想)</title>
  8. 	<style type="text/css">
  9. 		.add{
  10. 			font-size: 26px;
  11. 			color: red;
  12. 			font-weight: bold;
  13. 		}
  14. 	</style>
  15. </head>
  16. <body>
  17. 	<div id="app">
  18. 		<ul>
  19. 			<!--当点击元素时 进行样式添加 排他-->
  20. 			<li v-for="(item , index) in arr" @click="changeFont(index)" :class="[index == num ? 'add' : '']" >
  21. 				{{ item }}
  22. 			</li>
  23. 		</ul>
  24. 	</div>
  25. 	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  26. 	<script>
  27. 		var vm = new Vue({
  28. 			el:'#app',
  29. 			data:{
  30. 				arr:["精选",'推荐','必备'],
  31. 				styles:true,
  32. 				num:0,
  33. 			},
  34. 			methods:{
  35. 				changeFont(index){
  36. 					this.num = index;
  37. 				}
  38. 			}
  39. 		})
  40. 	</script>
  41. </body>
  42. </html>

使用vue实现tab栏的点击切换样式的更多相关文章

  1. angular ng-repeat点击切换样式，浅谈track by $index

    前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...

  2. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  3. vue实现tab栏切换

    html <ul class="tab"> <li v-for="(item,index) in tabs" @click="tab ...

  4. vue入门：实现图片点击切换

    1.实现功能 2.目录结构 3.代码 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. Vue实现active点击切换样式

    1.html <div class="filter-nav" v-for="(item,index) in filterData.navTab" :key ...

  6. Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】

    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...

  7. tab栏切换，内容为不断实时刷新数据的vue实现方法

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...

  8. Vue(小案例）底部tab栏和顶部title栏的实现

    ---恢复内容开始--- 一.前言 1.底部tab栏实现 2.顶部title栏实现 二.主要内容   1.底部tab栏实现(将底部导航提取到公共的组件中) 具体效果:当点击切换不同的tab的时候,对应 ...

  9. 小程序开发顶部TAB栏和侧边分类点击

    先上一个效果图: 根据这个效果图我来说内容. 首先是顶部tab栏 效果实现依靠的是一个组件scroll-view.这个组件很有意思,可以多层嵌套,当然它的属性也很多. 这里主要用的是scroll-x, ...

随机推荐

  1. spawn-fcgi启动的一些报错问题

    spawn-fcgi启动报错 //编译生成bin文件,这里用到了fcgi和google的glog # g++ test.cpp -lfcgi -lglog -o test //运行 # spawn-f ...

  2. curl 模拟 GET\POST 请求，以及 curl post 上传文件

    curl GET 请求 curl命令 + 请求接口的地址. curl localhost:9999/api/daizhige/article 如上,我们就可以请求到我们的数据了,如果想看到详细的请求信 ...

  3. mysql 迁移

    背景 这次做oracle数据迁移,也想总结像mysql的数据迁移方式.简单列下吧,因为具体方式网上很多. 方式 可以通过修改mysql.ini的数据文件目录位置方法实现拷贝迁移,此种方式简单 通过备份 ...

  4. nginx： 应用访问默认采用https

    主要配置如下: #静态文件的访问 server { listen 443 ssl; server_name static.jksfrz.com; ssl_certificate d:/app/ngin ...

  5. springboot ****使用经验*******

    目录 1. 返回时间格式化问题 2. springboot 中获取属性 3. SpringBoot中启动是忽略某项检测 4.  启动不开启安全校验 一返回时间格式化问题 在Spring Boot项目中 ...

  6. js操作：selenium无法操作隐藏元素问题

    对于前端隐藏元素,一直是selenium自动化定位元素的隐形杀手,脚本跑到隐藏元素时位置时报各种各样的错误, 隐藏的下拉菜单又没有办法避免,此帖只为交流隐藏元素自动化定位处理方法(3种操作)      ...

  7. npm安装less和less-loadernpm或者stylus和stylus-loader

    vue-cli 构建的项目默认是不支持 less 的,需要自己添加. 首选,安装 less 和 less-loader ,在项目目录下运行如下命令 npm install less less-load ...

  8. kali linux networking scanning Cookbok （第三章结尾笔记）

    1.Zombie Scanning with Nmap Zombie scans can also be performed with an option in Namp ,  we can find ...

  9. Three teachers who make differences in my life

    人生路漫漫,从小到大,经历过九年义务教育的我们也受到过很多老师的熏陶,而已经进入大学的我也会回想起那些给我带来别样意义的老师们. 亲爱的老李-老李是我初中的班主任,也是我的历史老师.依稀记得上他的课会 ...

  10. post 数据

    可参照:http://www.voidcn.com/blog/Vindra/article/p-4917667.html 一.get请求 curl "http://www.baidu.com ...