使用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, ...
随机推荐
- codeblocks更改颜色主题
链接:http://www.cnblogs.com/wenbosheng/p/5899483.html
- codeblocks添加编译选项
-std=c++0x
- SQL Server - case when...then...else...end
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex ' THEN '男' ' THEN '女' ELSE '其他' END --Case搜索函数 ' T ...
- jQuery ajaxForm和 ajaxSubmit注意
http://jquery.malsup.com/form/#file-upload 在使用jQuery异步上传时,需要注意在存在文件上传时,要将返回数据的contentType设置为text/htm ...
- java+selenium实现web自动化
1.环境搭建: eclipse4.8 + java1.8 + selenium-3.14 基本都是使用最新版 (1) eclipse4.5下载:http://www.eclipse.org/downl ...
- 关于读取excel 和 写excel
def sync_db(data_list): '''Synchron potential student from excel to PrepareToCrm ''' push_list = ...
- ERROR: invalid byte sequence for encoding "UTF8": 0x00
1.使用kettle批量导入数据的时候,数据出现了下面的错误.ERROR: invalid byte sequence for encoding "UTF8": 0x00 关键点: ...
- 配置maven项目的开发时的默认jdk版本
配置所有maven项目的默认jdk版本,若不配置则提示"Warning:java: 源值1.5已过时, 将在未来所有发行版中删除" 在settings.xml文件中profiles ...
- Java-正则使用
Java-正则使用 注意 在Java中由于string的设计,导致斜杠是特殊的字符,所以如若想要在正则中使用斜杠,则需要两个斜杠来表示 eg: \d 需要写成: \\d ,两外 \\\\ 表示匹配单个 ...
- Win10 清理自带APP
如果想一次性把它们全都删掉,请输入: Get-AppxPackage -AllUsers | Remove-AppxPackage 但是如果你先建一个账户,以上应用就会再次全部出现,不想这样的话可以输 ...