<!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. 【原创】大叔经验分享（25）hive通过外部表读写hbase数据

    在hive中创建外部表: CREATE EXTERNAL TABLE hive_hbase_table(key string, name string,desc string) STORED BY ' ...

  2. Python学习笔记八

    类的高级用法 多态:   在其他语言,使用的是类的继承. 在python中,不需要指定数据类型. 基于TCP协议的socket通信实现: 类似于打电话的情景. 服务端: 1.买手机 2.插卡 3.开机 ...

  3. Python学习笔记二

    ---恢复内容开始--- 一. python几种数据类型的比较. 从以下几个方面比较: 1. 是否可变. 不可变类型:变量的值可以发生变化,id也变了,相当于创建了一个新的对象,所以一修改值,id就变 ...

  4. Redis数据结构之sds基本操作函数

    本文及后续文章,Redis版本均是v3.2.8 本篇文章讲解sds基本操作函数,我们从源码角度来进一步理解. 一.sds创建函数和销毁 sds创建函数 /* Create a new sds stri ...

  5. 10_27_requests模块

    1.get请求: 看源码 import requests url= "https://www.baidu.com" res = requests.get(url) print(re ...

  6. JavaScript异步加载的三种方式——async和defer、动态创建script

    一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...

  7. css变量使用

    CSS中的变量给了我们诸多优点:方便.代码重用.更可靠的代码库和提升防错能力.(此句转) 变量虽好用,但是兼容是在不怎么样:点这里查看. 一.变量的声明 :root { --base-font-siz ...

  8. 入门级----黑盒测试、白盒测试、手工测试、自动化测试、探索性测试、单元测试、性能测试、数据库性能、压力测试、安全性测试、SQL注入、缓冲区溢出、环境测试

    黑盒测试 黑盒测试把产品软件当成是一个黑箱子,只有出口和入口,测试过程中只要知道往黑盒中输入什么东西,知道黑盒会出来什么结果就可以了,不需要了解黑箱子里面是如果做的. 即测试人员不用费神去理解软件里面 ...

  9. Java 多线程 sleep()方法与yield()方法的区别

    sleep()方法与yield()方法的区别如下: 1 是否考虑线程的优先级不同 sleep()方法给其他线程运行机会时不考虑线程的优先级,也就是说,它会给低优先级的线程运行的机会.而yield()方 ...

  10. 前端性能优化 —— 添加Expires头

    简要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本 ...