Vue实战练手小案例，指令，Todolist，组件分离版和axios数据交互版案例，锻炼动手能力

最新推荐文章于 2024-04-08 15:45:39 发布

成为前端大牛

最新推荐文章于 2024-04-08 15:45:39 发布

阅读量198

点赞数 1

分类专栏：计划文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_45163356/article/details/119958344

版权

本文通过Vue基础指令操作演示了一个图片跳转案例，并详细介绍了如何构建一个Todolist应用，包括组件化的头部、数据展示和尾部组件。每个组件都涉及了特定的知识点，如父子组件通信、数组操作和数据交互。同时，文章涵盖了使用axios进行数据交互的实践。

摘要由CSDN通过智能技术生成

1：基础指令案例（知识点：基础指令操作，编程思想）

点击上方字母下方自动跳转对应的图片：

实现原理：定义选项卡当前currentIndex: 0, 通过点击事件将选项卡currentIndex等于list数组对象里的id，通过绑定:class='currentIndex==index?"current":""'，相等显示对应的样式（display: block;），所用知识v-text，v-on,v-bind,v-for，索引操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .tab ul {
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
      .tab ul li {
        box-sizing: border-box;
        padding: 0;
        float: left;
        width: 100px;
        height: 45px;
        line-height: 45px;
        list-style: none;
        text-align: center;
        border-top: 1px solid blue;
        border-right: 1px solid blue;
        cursor: pointer;
      }
      .tab ul li:first-child {
        border-left: 1px solid blue;
      }
      .tab ul li.active {
        background-color: orange;
      }
      .tab div {
        width: 500px;
        height: 300px;
        display: none;
        text-align: center;
        font-size: 30px;
        line-height: 300px;
        border: 1px solid blue;
        border-top: 0px;
      }
      .tab div.current {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="tab">
        <ul>
          <li
            @click="change(index)"
            :class='currentIndex==index?"active":""'
            :key="item.id"
            v-for="(item,index) in list"
          >
            {
  {item.title}}
          </li>
        </ul>
        <div
          :class='currentIndex==index?"current":""'
          :key="item.id"
          v-for=

最低0.47元/天解锁文章

成为前端大牛

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue实战练手小案例，指令，Todolist，组件分离版和axios数据交互版案例，锻炼动手能力

1：基础指令案例点击上方字母下方自动跳转对应的图片：实现原理：定义选项卡当前currentIndex:0, 通过点击事件将选项卡currentIndex等于list数组对象里的id，通过绑定:class='currentIndex==index?"current":""'，相等显示对应的样式（display:block;），所用知识v-text，v-on,v-bind,v-for，索引操作<!DOCTYPE html><html lang="en"> ...
复制链接

扫一扫

专栏目录