<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<meta http-equiv="X-UA-Compatible" content="ie=edge" />

	<title>根据循环出来的列表中的索引值 进行点击当前项为当前点击项进行样式的添加(实现排他思想)</title>

	<style type="text/css">

		.add{

			font-size: 26px;

			color: red;

			font-weight: bold;

		}

	</style>

</head>

<body>

	<div id="app">

		<ul>

			<!--当点击元素时 进行样式添加 排他-->

			<li v-for="(item , index) in arr" @click="changeFont(index)" :class="[index == num ? 'add' : '']" >

				{{ item }}

			</li>

		</ul>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script>

		var vm = new Vue({

			el:'#app',

			data:{

				arr:["精选",'推荐','必备'],

				styles:true,

				num:0,

			},

			methods:{

				changeFont(index){

					this.num = index;

				}

			}

		})

	</script>

</body>

</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. 创建一个MongoDB数据库再到配置成Window服务再设置用户名密码

    1.安装MongoDB数据在官网下载安装 然后在C盘找到C:\Program Files\MongoDB\Server\4.0\bin这个可执行目录 使用cmd进入到这: 2.在C盘根目录创建一个名为 ...

  2. GMM与EM共舞

    GMM,即高斯混合模型(Gaussian Mixture Model),简单地讲,就是将多个高斯模型混合起来,作为一个新的模型,这样就可以综合运用多模型的表达能力.EM,指的是均值最大化算法(expe ...

  3. Lua中的函数

    [前言] Lua中的函数和C++中的函数的含义是一致的,Lua中的函数格式如下: function MyFunc(param) -- Do something end 在调用函数时,也需要将对应的参数 ...

  4. 转 -Filebeat + Redis 管理 LOG日志实践

    Filebeat + Redis 管理 LOG日志实践 小赵营 关注 2019.01.06 17:52* 字数 1648 阅读 24评论 0喜欢 2 引用 转载 请注明出处 某早上,领导怒吼声远远传来 ...

  5. php-beast 代码加密

    https://github.com/liexusong/php-beast 修改php.ini配置 extension_dir = "/usr/lib/php/20151012/" ...

  6. Oracle内存详解之 Library cache 库缓冲

    Oracle内存详解之 Library cache 库缓冲 2017年11月09日 11:38:39 阅读数:410更多 个人分类: 体系结构 Library cache是Shared pool的一部 ...

  7. 三目算法、if/else，switch/case运用

    //输入学生的成绩,判断考试是否及格,及格6大于等于0 //第一种写法:三目运算 大多用于单独判断是否满足某个条件 import java.util.Scanner; public class Hel ...

  8. Linux--奇思淫才

    根据进程号找到可执行的文件路径 [ec2-user@baolin ~]$ ll /proc/<pid>/exe lrwxrwxrwx 1 ec2-user ec2-user 0 May 3 ...

  9. SignalR 实时推送消息

    业务场景 以前做过一个东西,就是当数据库有数据更新的时候,能够自动更新到前台,那时候signalr还没出现的时候,需要自己实现轮询读库,对于数据库和程序都是比较郁闷的事情.现在利用SignalR解决数 ...

  10. 一致推崇的Linux系统还有那么安全吗？

    今天想谈谈关于系统安全:我们都知道,Linux早已成为趋势,在我们互联网中占有不可或缺的地位,在我们眼中,它是神圣的,不可替代的,无懈可击的:真的是这样的吗? 但是关于病毒对Linux所造成的一系列威 ...