使用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, ...
随机推荐
- 编译Android ROM环境搭建
环境搭建 1 安装ubuntu 推荐12.04或13.10 2 安装jdk7和一些所需要的包安装jdk7$ sudo apt-get update$ sudo apt-get install open ...
- kerbose常用操作
1.查看有那些用户认证 kadmin.local -q "list_principals" 2.用keytab文件进行认证 kinit -kt /root/keytab/hive. ...
- mvc webapi+autofac + session 的使用
先说说我的项目情况:MVC5+AUTOFAC,下面就直接说说怎么加入webapi.autofac的配置.登录使用session 一.MVC5添加WEBAPI 1.添加 参考文章:https://blo ...
- 此主机支持Intel VT-x，但Intel VT-x处于禁用状态
原因:未开启虚拟化技术 解决方法:https://www.cnblogs.com/jiefu/p/10711955.html
- C/C++的20个位运算技巧
一提起位运算,人们往往想到它的高效性,无论是嵌入式编程还是优化系统的核心代码,适当的运用位运算总是一种迷人的手段,或者当您求职的时候,在代码中写入适当的位运算也会让您的程序增加一丝亮点,最初当我读&l ...
- java---- XMLEncoder 和 XMLDecoder 和 xSteam工具使用
XMLEncoder: 将对象写入XML数据中 import org.dom4j.DocumentException; import java.beans.XMLEncoder; import jav ...
- 通过语法设置DNS解析
通过语法设置DNS解析 # 来自 https://dns.he.net/?action=logout # 语法 http://[你的域名]:[你的密码]@dyn.dns.he.net/nic/upda ...
- 叩响C#之门－继承
就记录下一些概念,以供备忘. 一生二,二生三,三生万物.类类相生,生生不息. 重写和重载的区别: 重载是指同一个类中相同名称但参数不同的方法. 重写是指继承关系中,在派生类中重写由基类继承来的方法 ...
- SQL反模式学习笔记12 存储图片或其他多媒体大文件
目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点: 1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...
- 关于eclipse配置tomcat时，console打印成功消息，但是不能成功访问页面的问题
解决方法:在首选项中配置tomcat后,为项目添加runtime后,在左下方的选项中,选择中间一项即可 重启发布,就可以正常访问了