程序员都会的之Vue TODO

最新推荐文章于 2024-01-14 23:51:43 发布

未LIVE

最新推荐文章于 2024-01-14 23:51:43 发布

阅读量164

点赞数 1

分类专栏： vue 文章标签： Vue TODO

本文链接：https://blog.csdn.net/qq_43843173/article/details/103016732

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这是我的vue TODO ，我的TODO是这样的…

<!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>Vuejs TODO</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
    .del{
        text-decoration:line-through;
        color: #ccc;
    }
</style>
<body>
<!--2. 导航-->
<nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">
              Vuejs_TODO
            </a>
          </div>
        </div>
      </nav>
  
  <!--pannel-->
      <div class="container" id="app">
          <div class="row">
              <div class="col-md-8 col-md-offset-2">
                  <div class="panel panel-success">
  
                      <div class="panel-heading">
                          <h3 class="text-danger">-_-, 还有{{ othersItem }}件事未完成</h3>
                          <!-- 键盘修饰符  @keyup.enter 用来修饰用户行为，敲击Enter触发 -->
                          <input type="text"  class="form-control" v-model="iteminfo" @keyup.enter="addItem">
                      </div>
  
                      <div class="panel-body">
  
                          <ul class="list-group">
                              <li class="list-group-item"  :class="{del:todo.isCompleted}" v-for="todo in newTodo">
                                  <input type="checkbox" v-model="todo.isCompleted"> {{ todo.title }} <button type="button" class="btn btn-danger btn-xs pull-right" @click="delItem(todo)">&times;</button>
                              </li>
                          </ul>
  
                      </div>

                      <div class="panel-footer">
                          <ul class="nav nav-pills">
                            <li :class="{active:hash === 'all'}"><a href="#/all">全部</a></li>
                            <li :class="{active:hash === 'finish'}"><a href="#/finish">已完成</a></li>
                            <li :class="{active:hash === 'unfinish'}"><a href="#/unfinish">未完成</a></li>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </body>
  <!-- 唯一性id，制造厂库，字符串类型 -->
<script src="http://wzrd.in/standalone/uuid%2Fv1@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</html>

下面是vuejs代码：

let vm = new Vue({
            el:"#app",
            data:{
                todos:[
                    {
                        id:1,
                        title:'吃饭',
                        isCompleted:false,
                    },
                    {
                        id:2,
                        title:'睡觉',
                        isCompleted:false,
                    },
                    {
                        id:3,
                        title:'打豆豆',
                        isCompleted:false,
                    }
                ],
                iteminfo:'',
                hash:'all',
                newTodo:[],
            },
            //生周期的检测
            created:function(){
                var _this = this;//创建一个变量来保存this，这里的this指向是Vue实例
                window.addEventListener('hashchange',function(){
                    console.log(this);//这里的this指向是window
                    _this.hash = location.hash.substring(2);
                });
            },
            methods:{
                addItem:function(){
                    var newitem = {};
                     //创建唯一id
                    var str =  uuidv1();
                    //全局匹配，把所有的-全部去掉
                    str = str.replace(/-/g,'');
                    if(this.iteminfo!=''){
                        newitem.id = str;
                        newitem.title = this.iteminfo;
                        newitem.isCompleted = false;
                        //放到数组中去后
                        this.todos.push(newitem);
                        //把input框清零
                        this.iteminfo = '';
                        return;
                    }else{
                        alert('请添加计划项目');
                    }
                },
                
                delItem:function(data){
                    // console.log(data);
                    this.newTodo = this.newTodo.filter((item)=>{
                        return item != data;
                    });
                    this.todos = this.todos.filter((item)=>{
                        return item != data;
                    });
                },
            },

            //依赖性，剩余多少件事情没有完成的话，依赖于todos中的isCompleted中的值
            computed:{
                othersItem:function(){
                    return this.newTodo.filter((item)=>{
                        //返回保留没有完成的一个新数组，他的长度就是代表还有多少件没有完成的。
                        return !item.isCompleted;
                    }).length;
                },
                // newTodo: function () {
                //     if( this.hash == 'all' ){
                //         return this.todos;
                //     }
                // }
            },

            //监视点击的hash的变化，展示已经完成的和未完成的任务
            watch:{
                hash:function(){
                    var newTodo = [];
                    if(this.hash === 'unfinish'){
                        newTodo = this.todos.filter((item)=>{
                            return !item.isCompleted
                        });
                        // this.todos = newTodo;
                    }else if(this.hash === 'finish'){
                        newTodo = this.todos.filter((item)=>{
                            return item.isCompleted
                        });
                        // this.todos = newTodo;
                    }else{
                        newTodo = this.todos;
                    }
                   this.newTodo = newTodo;
                },
                deep:true,
                
            }
        })

功能可以记录任务，删除任务，任务提示，已完成，未完成…

效果图：

未LIVE

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
程序员都会的之Vue TODO

这是我的vue TODO ，我的TODO是这样的…<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫