使用vue实现tab栏的点击切换样式
<!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栏的点击切换样式的更多相关文章
- angular ng-repeat点击切换样式，浅谈track by $index
前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...
- vue点击切换样式，点击切换地址栏，点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- vue实现tab栏切换
html <ul class="tab"> <li v-for="(item,index) in tabs" @click="tab ...
- vue入门：实现图片点击切换
1.实现功能 2.目录结构 3.代码 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- Vue实现active点击切换样式
1.html <div class="filter-nav" v-for="(item,index) in filterData.navTab" :key ...
- Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- tab栏切换，内容为不断实时刷新数据的vue实现方法
先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...
- Vue(小案例）底部tab栏和顶部title栏的实现
---恢复内容开始--- 一.前言 1.底部tab栏实现 2.顶部title栏实现 二.主要内容 1.底部tab栏实现(将底部导航提取到公共的组件中) 具体效果:当点击切换不同的tab的时候,对应 ...
- 小程序开发顶部TAB栏和侧边分类点击
先上一个效果图: 根据这个效果图我来说内容. 首先是顶部tab栏 效果实现依靠的是一个组件scroll-view.这个组件很有意思,可以多层嵌套,当然它的属性也很多. 这里主要用的是scroll-x, ...
随机推荐
- 重新定义Pytorch中的TensorDataset，可实现transforms
class TensorsDataset(torch.utils.data.Dataset): ''' A simple loading dataset - loads the tensor that ...
- Linux的vim编辑器中的翻页命令
当我们进入Linux的vim编辑器查看脚本时,按上下键查看是不是非常慢?这个时候就要用到我们的翻页快捷键了,快捷键命令如: 整页翻页命令为:Ctrl + f 键 f 的英文全拼为:forward: ...
- 「luogu2486」[SDOI2011] 染色
https://www.luogu.org/problemnew/show/P2486 轻重链剖分后,问题转化为一个链上的问题: 线段树维护区间内的颜色段数量,左端点.右端点的颜色: 线段树注意事项 ...
- ES进阶--04
第30节彻底掌握IK中文分词_上机动手实战IK中文分词器的安装和使用 之前大家会发现,我们全部是用英文在玩儿...好玩儿不好玩儿...不好玩儿 中国人,其实我们用来进行搜索的,绝大多数,都是中文应用, ...
- RDay1-Problem 1 A
题目描述 给定一个长度为n的正整数序列a[i],计算出有多少个i<j的数对,a[i]+a[j]为二的次幂,也就是说存在一个正整数x满足a[i]+a[j]==2^x. 输入 输入文件A.in. 第 ...
- Mac osx 系统安装 eclipse
https://jingyan.baidu.com/article/fea4511ad46a86f7bb9125e5.html
- Linux--奇思淫才
根据进程号找到可执行的文件路径 [ec2-user@baolin ~]$ ll /proc/<pid>/exe lrwxrwxrwx 1 ec2-user ec2-user 0 May 3 ...
- php判断浏览器还是微信打开
本人亲测,但是存在一个小问题,就是用此方法在手机端打开会显示Google Chrome,但是在PC端是没有问题的,现在还在测试,先把第一版代码分享给大家! if(strpos($_SERVER['HT ...
- 在.NET开发中的单元测试工具之(2)——xUnit.Net
在上一篇<在.NET开发中的单元测试工具之(1)——NUnit>中讲述了如何使用NUnit在.NET开发中进行单元测试以及NUnit的一些缺点,今天将讲述如何使用xUnit.Net来进行单 ...
- 通用JDBC-demo
1.JDBC 的工具包(utils):包含获取数据库连接, 关闭数据库资源等方法 JDBCTools_pro.java package com.app.utils; import java.beans ...