使用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, ...
随机推荐
- codeforces 1017C - Cloud Computing 权值线段树 差分 贪心
https://codeforces.com/problemset/problem/1070/C 题意: 有很多活动,每个活动可以在天数为$[l,r]$时,提供$C$个价格为$P$的商品 现在从第一天 ...
- 图文详解互联网根基之HTTP
这是本人对<图解HTTP>和<HTTP权威指南>阅读后总结的大家常用的.重要的知识点,前端.后端同学居家必备! 一.概述 HTTP是Hyper Text Transfer Pr ...
- vue路由懒加载
大项目中,为了提高初始化页面的效率,路由一般使用懒加载模式,一共三种实现方式.(1)第一种写法: component: (resolve) => require(['@/components/O ...
- Kali linux2.0里Metasploit的postgresql selected, no connection问题解决
说在前面的话 1.在kali中metasploit默认使用postgresql作为它的数据库: 想要开启metasploit服务首先得打开postgresql数据库, 命令如下:(或者:/etc/in ...
- PHP 闭包函数
PHP>v5.3闭包函数,闭包函数没有函数名称,直接在function()传入变量即可 使用时将定义的变量当作函数来处理 匿名函数也叫闭包函数(closures允许创建一个没有指定没成的函数,最 ...
- Android读写properties配置文件
写这篇文章之前可以成功运行,文章后就各种找不到文件.所以并没有采用此种方式,后期完善.详见下篇解决方案. 配置文件读取很容易,修改需要注意权限,比如assets目录下就不允许修改. 配置文件的创建: ...
- 2018-2019-1 20189201《Linux内核原理与分析》第三周作业
写作业之前,写了时光博物馆参观感受.1978-2018 40年的改革开放历程. 一.C语言中内嵌汇编语言的写法 内嵌汇编的语法如下: asm volatile ( 汇编语句模版: 输出部分: 输入部分 ...
- python 爬虫与数据可视化--python基础知识
摘要:偶然机会接触到python语音,感觉语法简单.功能强大,刚好朋友分享了一个网课<python 爬虫与数据可视化>,于是在工作与闲暇时间学习起来,并做如下课程笔记整理,整体大概分为4个 ...
- docker备份mongodb数据，导入导出
场景:服务器要升级,之前在linux部署的mongodb没有用docker,升级后,mongodb要用docker部署,并将原有的mongodb数据导入到docker部署的mongodb中. 1.在l ...
- 04-Python入门学习-流程控制
一.流程控制if 语法1: if 条件: code1 code2 code3 .... age=180 height=163 weight=75 sex='female' is_beautif ...