目录
一，京东秒杀导航栏
1，静态样式展示
2，设计步骤
1，html骨架
2，css样式设计
3，vue3动态样式设计
1，v-for使用
1，先在js模块做如下准备
2，v-for遍历
2，实现动态设置css效果
1,设计可变参数下标
2,让activeIndex作为一个动态下标改变样式
4，所有代码
一，京东秒杀导航栏
1，静态样式展示
2，设计步骤
1，html骨架
<ul>
<li><a href="#">京东秒杀</a></li>
<li><a href="#">每日特价</a></li>
<li><a href="#">限时秒杀</a></li>
</ul>使用ul和li设计一个简单的骨架。
效果：
2，css样式设计
* //给所有的元素干掉marging和padding
{
margin: 0px;
padding: 0px;
}
ul
{
//去掉list样式
list-style: none;
//让ul这个样式水平填充
display: flex;
//设置ul的宽度
width: 400px;
//设置边距
line-height: 50px;
//设置下边框的样式
border-bottom: 1px solid red;
}
ul li
{
//设置大小
width: 100px;
height: 50px;
//字体居中
text-align: center;
}
ul li a
{
//去掉a标签的样式
text-decoration: none;
//设置字体颜色
color: black;
//字体加粗
font-weight: bold;
//让每一个li元素都是块级元素
display: block;
}
//动态样式:用户点击时才添加到特定的元素中
.active
{
background-color: red;
color: white;
}设计完上面的样式后，界面就变成如下样式
3，vue3动态样式设计
1，v-for使用
v-for能够循环遍历一个数组，得到这个数组的一个子元素和对应下标。
使用如下：
1，先在js模块做如下准备
<script setup>
import { ref } from 'vue'//引入ref模块，主要是为了引入数据响应式
//定义一个数组，用来给v-for遍历
const tabs = ref([
{ id: 1, name: "京东秒杀" },
{ id: 2, name: "每日特价" },
{ id: 1, name: "限时抢购" }
])
</script>
2，v-for遍历
<template>
<ul>
<li v-for="item,index in tabs " ><a href="#">{{ item.name }}</a></li>
</ul>
</template>2，实现动态设置css效果
1,设计可变参数下标
const activeIndex = ref(0)2,让activeIndex作为一个动态下标改变样式
<ul>
<li v-for="item,index in tabs " >
<a href="#" :class="activeIndex===index?'active':''"
@click="activeIndex=index">//绑定点击事件，点击就改变activeIndex下标
{{ item.name }}
</a></li>
</ul>4，所有代码
<script setup>
import { ref } from 'vue'//引入ref模块，主要是为了引入数据响应式
//定义一个数组，用来给v-for遍历
const tabs = ref([
{ id: 1, name: "京东秒杀" },
{ id: 2, name: "每日特价" },
{ id: 1, name: "限时抢购" }
])
const activeIndex = ref(0)
</script>
<template>
<ul>
<li v-for="item,index in tabs " >
<a href="#" :class="activeIndex===index?'active':''" @click="activeIndex=index">
{{ item.name }}
</a></li>
</ul>
</template>
<style lang="scss">
* //给所有的元素干掉marging和padding
{
margin: 0px;
padding: 0px;
}
ul
{
//去掉list样式
list-style: none;
//让ul这个样式水平填充
display: flex;
//设置ul的宽度
width: 400px;
//设置边距
line-height: 50px;
//设置下边框的样式
border-bottom: 1px solid red;
}
ul li
{
//设置大小
width: 100px;
height: 50px;
//字体居中
text-align: center;
}
ul li a
{
//去掉a标签的样式
text-decoration: none;
//设置字体颜色
color: black;
//字体加粗
font-weight: bold;
//让每一个li元素都是块级元素
display: block;
}
//动态样式:用户点击时才添加到特定的元素中
.active
{
background-color: red;
color: white;
}
</style>
