超级简单的tab点击
2024-09-02 14:48:02
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<div id="app">
<div class="button" v-for="(item, index) in list" :class="{ active: visible == index}" @click="clickToIndex(index)">
{{ item.label }}
</div>
</div>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
list: [
{
label: '你'
},
{
label: '我'
},
{
label: '他'
}
],
visible: ''
},
methods: {
clickToIndex (index) {
this.visible = index
}
}
})
</script>
</body>
<style>
.button{
display: inline-block;
margin-left: 2px;
width: 2rem;
height: 0.7rem;
font-size: 12px;
color: #7a82e8;
line-height: 0.7rem;
text-align: center;
border-radius: 0.7rem;
border: 1px solid #7a82e8;
margin-top: 0.2rem;
margin-right: 0.2rem;
}
.active {
background-color: red
}
</style>
</html>
最新文章
- [教程]phpwind9.0应用开发基础教程
- Docker 官网信息
- linux下usb驱动接口中端点介绍
- caffe IDE 开发环境配置
- RESTheart官方文档
- 【原】关于IPcamera几个问题的思考
- poj1026
- keil中使用_at_绝对地址定位
- ThinkPHP 3.1.2 查询方式的一般使用1
- css3 3d变换和动画——回顾
- Messagepack原理
- GATT之Device information Service
- 南京邮电大学//bugkuCTF部分writeup
- python多线程之t.setDaemon(True) 和 t.join()
- PAT基础6-1
- 设备树(device tree)学习笔记
- C++ 抽象类与接口
- AD+DMA+USART实验中的收获和总结
- <;转>;jmeter(十五)函数助手
- 在vue中使用后台提供 的token验证方式总结及使用方法