美文网首页
Vue todolist

Vue todolist

作者: 大白熊_8133 | 来源:发表于2018-11-23 18:36 被阅读0次
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      </head>
      <body>
    
        <div id="app">
        <nav class="navbar navbar-inverse">
            <!--默认颜色为灰色 navbar-inverse是反色导航条-->
            <div class="container-fluid">
              <div class="navbar-header">
                <a class="navbar-brand" href="#">
                  大白熊
                </a>
              </div>
            </div>
          </nav>
          <div class="container">
            <div class="row">
              <div class="panel panel-info">
                <div style="font-size:30px" class="panel-heading" >还有<span class="text-danger" v-cloak>{{x}}</span>件事需要完成</div>
                <div class="panel-body">
                    <input type="text" class="form-control" placeholder="请输入添加的项目" v-model="newItem" @keydown.Enter="addnew">
                    <!--form-control是将输入框横向填满-->
                  <ul class="nav nav-pills" style="margin-top:5px">
                    <li role="presentation" :class="{active:hash=='#/all'}"><a href="#/all" >全部</a></li>
                    <li role="presentation" :class="{active:hash=='#/finish'}"><a href="#/finish">已完成</a></li>
                    <li role="presentation" :class="{active:hash=='#/unfinish'}"><a href="#/unfinish">未完成</a></li>
                  </ul>
                  <ul class="list-group" style="margin-top:5px">
                    <li class="list-group-item" v-for="thing in things" :class="{disabled:thing.hasdone}" @dblclick="change(thing)" >
                      <span v-show="thing.flag">
                        <input type="checkbox" v-model="thing.hasdone" v-cloak >
                        {{thing.name}}
                      </span>
                      <input type="text"  v-show="!thing.flag" v-model="thing.name"  @keydown.Enter="thing.flag=!thing.flag" @blur="thing.flag=!thing.flag" v-focus="!thing.flag">
                      <button class="btn btn-xs btn-danger pull-right" @click="del(thing)">删除</button>
                    </li>
                  </ul>
                </div>
                <div class="panel-footer"></div>
              </div>
            </div>
          </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="pro.json"></script>
        <script>
          const vm=new Vue(
          {
    
            directives:{
              //自定义指令
              focus(el,bindings){
                //el指操纵的dom
                if(bindings.value==true)
                {//bindings是绑定的属性,.value表示值
                  el.focus()
                }
              }
                },
            el:"#app",
            created(){
              if(localStorage.getItem('data')==null)
              {
                //如果localStorage中有数据就用localStorage,没有用json中定义的
                axios.get('./todo.json').then(data=>{this.allthings=data.data},function(err){alert("err")})
    
              }
              else {
                this.allthings=JSON.parse(localStorage.getItem('data'))
              }
              this.finishthings=this.allthings.filter((item)=>item.hasdone)
              this.unfinishthings=this.allthings.filter((item)=>!item.hasdone)
              //第一个参数是事件,第二个是回调函数,第三个默认为false
              //监控hash的变化,如果页面已经有hash了,重新刷新页面也要获取hash
              this.hash=window.location.hash||'#/all';
              window.addEventListener("hashchange",()=>{
                this.hash=window.location.hash
              },false)
            },
            computed:{
              things:{
                get(){
                  if(this.hash=='#/all')
                  {
                  return this.allthings;
                  }
    
                  else if(this.hash=='#/unfinish')
                  {
    
                    return this.unfinishthings;
                  }
                  else if(this.hash=='#/finish')
                  {
                  return this.finishthings;
                  }
                }
              },
              x:{
                get(){
                  return this.allthings.filter(item=>!item.hasdone).length
                }
              }
            },
            methods:
            {
              change(thing)
              {
                this.allthings.forEach(item=>{
                  if(item==thing)
                  item.flag=false;
                  else {
                    item.flag=true
                  }
                })
    
              },
              del(o){
                this.allthings=this.allthings.filter(item=>item!=o)
              },
              addnew(){
                this.allthings.push({name:this.newItem,hasdone:false,flag:true})
                this.newItem=""
              }
            },
            watch:{
              allthings:{
                //改变name不会触发watch,watch默认只监控一层是数据变化,数组变化能够监控,数组内对象内容变化不会监控到
                handler(newVal,oldVal){//默认写成函数,相当于默认写了handler
                  //localStorage默认存储字符串
                  localStorage.setItem('data',JSON.stringify(this.allthings))
                  this.finishthings=this.allthings.filter((item)=>item.hasdone)
                  this.unfinishthings=this.allthings.filter((item)=>!item.hasdone)
                },deep:true
              }
            },
            data:{
              allthings:[],
              unfinishthings:[],
              finishthings:[],
              newItem:"",
              hash:""
            }
          }
          )
    
        </script>
    
      </body>
    
    </html>
    
    

    todo.json文件
    [
    {"name":"背英语","hasdone":false,"flag":true},
    {"name":"打游戏","hasdone":false,"flag":true},
    {"name":"散步","hasdone":false,"flag":true}
    ]

    相关文章

      网友评论

          本文标题:Vue todolist

          本文链接:https://www.haomeiwen.com/subject/jshsqqtx.html