<!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. radio日志sim卡信号状态分析

    logcat -b radio日志 // 接着将slot 0主卡置为false,将slot 1设置为true 08-09 11:24:40.335 2565 3243 D RILJ : [4820]& ...

  2. SQL Server Change Tracking

    1 概述 “更改跟踪”和“变更数据捕获”捕获和记录用户表的DML更改(插入.更新和删除操作),为某些有特殊需求的应用程序服务. 1.1 更改跟踪 更改跟踪捕获表的数据行更改这一行为,但不会捕获更改的具 ...

  3. noj算法 素数环 回溯法

    描述: 把1到20这重新排列,使得排列后的序列A满足:a. 任意相邻两个数之和是素数b. 不存在满足条件a的序列B使得:A和B的前k(0 <= k <= 19)项相同且B的第k+1项比A的 ...

  4. 1.arm的linux系统搭建

    从裸板到系统 一般是CPU内部有启动代码,如nuvoton的nuc900系列的芯片内部就有ibr程序,来控制启动过程,在usb启动时负责加载usb驱动,这样在pc端就可以识别到usb设备了,然后通过t ...

  5. github密钥

    官网英文资料:https://help.github.com/articles/connecting-to-github-with-ssh/ 1.生成SSH keys文件id_rsa.pub ssh- ...

  6. css实现右尖括号样式

    .arrow{ width: 6px; height: 6px; border-top: 1px solid #999; border-right: 1px solid #999; transform ...

  7. 关于 win10 系统中 Anaconda3 中修改 Jupyter Notebook 默认启动目录

    目标: 修改Anaconda3中自带的Jupyter Notebook默认启动目录. 步骤:     1.提前创建好你想要启动位置文件夹.     2.寻找配置文件,"jupyter_not ...

  8. jfinal undertow web.xml

    由于 undertow 是为嵌入式 server 而生,所以 jfinal undertow 项目是不需要 web.xml 这个文件的 线上这版 Filter.Servelt.Listener.Web ...

  9. numpy的索引-【老鱼学numpy】

    简单的索引值 import numpy as np a = np.arange(3, 15).reshape(3, 4) print("a=") print(a) print(&q ...

  10. Redis数据结构之quicklist

    本文及后续文章,Redis版本均是v3.2.8 我们在使用Redis对外暴露的list数据结构时,给我们带来极大的便利性.其底层实现所依赖的内部数据结构就是quicklist. 我们先来回忆下list ...