当前位置：首页 > article >正文

vue3学习---案例实现学习

article 2024/11/8 19:08:57

一，京东秒杀导航栏

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>

查看全文

http://www.kler.cn/a/384776.html