使用Vue+boot+jQuery实现TODO便签

最新推荐文章于 2024-04-16 00:42:29 发布

旧味清欢|

最新推荐文章于 2024-04-16 00:42:29 发布

阅读量225

点赞数

分类专栏： Vue 项目案例应用及相关解决方案文章标签： vue.js jquery javascript

本文链接：https://blog.csdn.net/w1404273025/article/details/126044229

版权

Vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

项目案例应用及相关解决方案

10 篇文章 0 订阅

订阅专栏

使用Vue+boot+jQuery实现TODO便签

项目效果图如下

TODO便签预览

具体实现如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
  </script>
  <style>
    .panel {
      width: 1200px;
      /* height: 600px; */
      min-height: 600px;
      margin: auto;
      margin-top: 50px;
    }

    .text_delete {
      text-decoration: line-through;
    }
  </style>
</head>

<body>

  <div id="app">
    <div class="panel panel-info" id="app">
      <div class="panel-heading" style="text-align: center;">
        <h2>TPP小辉TODO</h2>
      </div>
      <div class="panel-body">
        <!-- TODO -->
        <div class="input-group">
          <input type="text" class="form-control" v-model="inputTodo" placeholder="请输入您将要做的事">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" @click="addTodo">Go!</button>
          </span>
        </div><!-- /input-group -->

        <ul class="nav nav-tabs" id="myTabs" role="tablist" style="margin-top: 30px;">
          <li role="presentation" class="active"><a href="#todoall" aria-controls="home" role="tab"
              data-toggle="tab">全部待办</a></li>
          <li role="presentation"><a href="#todonone" aria-controls="profile" role="tab" data-toggle="tab">未完成待办</a>
          </li>
          <li role="presentation"><a href="#tododone" aria-controls="messages" role="tab" data-toggle="tab">完成待办</a>
          </li>
        </ul>

        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade in active" id="todoall">
            <!-- 全部待办 -->
            <ul class="list-group" v-for="(item,index) in list" style="margin-top: 30px;">
              <li class="list-group-item" :class="{text_delete:item.todoStatus}" style="position: relative;">
                {{item.todoName}}
              </li>
            </ul>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="todonone">
            <!-- 未完成待办 -->
            <ul class="list-group" v-for="(item,index) in list" style="margin-top: 30px;">
              <li class="list-group-item" style="position: relative;" v-if="!item.todoStatus">{{item.todoName}}
                <button type="button" class="btn btn-default" @click="removeTodo(index)"
                  style="position: absolute; right: 0;top: 2px;">TODO</button>
              </li>
            </ul>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="tododone">
            <!-- 已完成的待办 -->

            <ul class="list-group" v-for="(item,index) in list" style="margin-top: 30px;">
              <li class="list-group-item" style="position: relative;text-decoration: line-through;"
                v-if="item.todoStatus">
                {{item.todoName}}

              </li>
            </ul>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
        </div>
      </div>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      list: [{
        todoName: '吃饭',
        todoStatus: false
      }, {
        todoName: '睡觉',
        todoStatus: false
      }, {
        todoName: '打豆豆',
        todoStatus: true
      }],
      inputTodo: ''
    },
    methods: {
      addTodo() {
        let todoObj = {
          todoName: this.inputTodo,
          todoStatus: false
        }
        this.list.push(todoObj)
        this.inputTodo = ''
      },
      removeTodo(index) {
        this.list[index].todoStatus = true
      }
    },
  })
</script>


<script>
  $('#myTabs a[href="#todonone"]').tab('show')
  $('#myTabs a:first').tab('show')
  $('#myTabs a:last').tab('show')
</script>