vue实现简单的待办事项清单

笔记一篇，备查。

初学vue的时候，做了一个待办事项清单。

首页 First.vue

<template>
  <div id="app">
    <div class="q">待办事项清单</div>
    <p class="e">不积跬步无以至千里</p>
    <hr style="margin: 0 10% 6% 10%;" />
    <div class="u">
      <p>添加到待办事项列表</p>
      <input
        id="ap"
        type="text"
        @blur="pd"
        placeholder="请输入待办项目名称"
        v-model="content"
        style="text-indent:1em;height:40px;width:200px;font-size:15px;"
      />
      <button
        id="pl"
        @click="addrenwu()"
        style="text-indent:0.3em;height:47px;width:100px;font-size:15px;background-color:#EE6363;color:white;"
      >添加项目</button>
      <button
        id="cjx"
        onclick
        style="text-indent:0.3em;height:47px;width:100px;font-size:15px;background-color:#EE6363;color:white;"
      >创建项目</button>
    </div>
    <div class="t" id="k">
      <center style="padding-top:20px;color:white;font-size:30px;">待办事项列表</center>
    </div>
    <!-- <input type="text" v-for="(item,i) of items" v-model="items[i]" :key="i">
    <button @click="onAdd">添加</button>-->
    <table
      id="yh"
      border="solid 8 white"
      cellspacing="8"
      style="border-width:0px 0px 0px 0px;border-color:rgba(255,251,240, 0.2);"
    >
      <tbody id="tbMain"></tbody>
      <!-- <input
        class="rt"
        v-for="(item,i) of items"
        v-model="items[i]"
        :key="i"
        style="background-Color:rgba(255,251,240, 0.2);height:40px;
     width:1000px;margin-top:30px"
      />-->
    </table>
    <!-- <input type="text" v-model="content"/><button @click="addTask">添加任务</button> -->
    <!--代办事项的输入框-->
    <ul>
      <li
        v-for="(renwu,index) of list"
        :id="forId(index)"
        :key="index"
        class="ty"
        style="background-Color:rgba(255,251,240, 0.2);height:80px; width:100%;margin-top:10px"
      >
        <!-- <input type="text" id='liid' v-html="index" style="margin-top:30px;color:white;height:30px;width:100px">{{val}} -->
        <input
          :class="{'done':renwu.isDone}"
          v-model="renwu.name"
          style="text-indent:2em;width=500px;height=90px;margin-right:250px;padding:10px 200px 10px 0;background-Color:white;"
        />&nbsp;&nbsp;
        <button
          @click="maskDone(renwu)"
          style="margin-top:30px;color:white;height:30px;width:100px"
        <!-- <button @click="edit()" style="color:white;height:30px;width:100px">编辑</button> -->
        <button @click="deleterenwu(index)" style="color:white;height:30px;width:100px">删除待办事项</button>
        <button  @click="click()">go to param</button>
        <router-link :to="{name: 'Edit', query: {id: forId(index),name: renwu.name}}"> 编辑</router-link>
        <!-- <button type="primary" @click="addRoute">跳转页面</button> -->
      </li>
    </ul>
  </div>
</template>

<script>
// import Vue from "vue"
// import Msg from'./msg.js'
export default {
  data () {
    return {
      items: [],
      list: [],
      val: '',
      content: ''
    }
  },
  methods: {
    onAdd () {
      this.items.push('')
    },
    pd () {
      var a = document.getElementById('ap')
      if (a.length === 0) {
        alert('待办事项名称为空，请重新输入')
      } else {
        return true
      }
    },
    renwu () {
      if (this.content !== '' || this.content.length !== 0) {
        let renwu = {
          /* 创建一个对象，并存入list数组 */
          name: this.content,
          isDone: false
        }
        this.list.push(renwu)
        // var id = document.getElementsByClassName('ty')
        // alert(id.id)
        const arr = []
        // 过滤重复push
        Object.keys(this.list).forEach(key => {
          for (var i = 0; i < this.list.length; i++) {
            for (var j = 0; j < arr.length; j++) {
              if (arr[j] === this.list[i]) {
                break
              }
            }
            if (j === arr.length) {
              arr[arr.length] = this.list[i]
            }
          } // arr.push(this.list);
        })
        console.log(arr)
        // window.localStorage.setItem('forid', JSON.stringify(this.list.id))
        window.localStorage.setItem('lister', JSON.stringify(arr))
        this.content = ''
      }
      /* 最后把输入框的内容置为空 */
    },
    deleterenwu (index) {
      this.list.splice(index, 1)
    },
    maskDone (task) {
      task.isDone = true
    },
    forId (index) {
      return 'forid_' + index
    },
    edit () {
      // 把选中行的参数id传到URL里
      // var gid = localStorage.getItem('id')
      // window.location.href = url
      // this.$router.push({path: './components/Edit.vue' + '/' + 'type=edit'})
    },
    addRoute () {
      this.$router.push('/Edit.vue')
    },
    getIndex (index) {
      document.getElementById('liid').innerHTML = 1
      // console.log(index)
    },
    goParam: function () {
      this.$router.push({name: 'param', params: this.forId})
    },
    click () {
      this.$store.commit('saveCurrJobData', this.db)
    }
  }
}
</script>
<style scoped>
* {
  background-color: #ee6363;
  margin: 0;
  padding: 0;
}
.q {
  height: 60px;
  color: white;
  padding-top: 30px;
  padding-left: 10%;
  font-family: 微软雅黑;
  font-size: 50px;
}
.e {
  padding-left: 10%;
  color: white;
}
.w {
  width: 100%;
  height: 80px;
  position: relative;
  background-color: rgba(255, 251, 240, 0.2);
}
.r {
  width: 100%;
  height: 80px;
  margin-top: 25px;
  position: relative;
  background-color: rgba(255, 251, 240, 0.2);
}
.t {
  width: 100%;
  height: 80px;
  margin-top: 25px;
  margin-right: 50%;
  text-align: center;
  position: relative;
  background-color: rgba(255, 251, 240, 0.2);
}
.y {
  margin-left: 50%;
  position: relative;
  color: white;
  font-size: 20px;
}
.u {
  padding-left: 10%;
  position: relative;
  color: white;
  top: -10px;
  font-size: 25px;
  font-weight: bold;
}
.rt {
  background-color: rgba(255, 251, 240, 0.2);
  height: "40px";
  width: 100%;
}
</style>

Edit.vue

<template>
  <div id="ed">
    <div class="q">编辑事项清单</div>
    <p class="e">不积跬步无以至千里</p>
    <hr style="margin: 0 10% 6% 10%;" />
    <div id="p">
      <p
        style="width:18%;top:35px;color:white;font-size:18px;position:relative;padding-left:10%;padding-right:5px;"
      >事项名称：</p>
      <input
        id="t"
        class="ee"
        v-model="this.$route.query.name"
        type="text"
        style="text-indent:1em;border-radius:10px;"/>
        <!-- {{this.$store.state.id = this.$route.query.name}} -->
    </div>
    <p
      style="width:18%;top:35px;color:white;font-size:18px;position:relative;padding-left:10%;padding-right:5px;"
    >待办时间：</p>
    <input id="o" style="text-indent:1em;border-radius:10px;" />

    <p style="width:18%;top:35px;color:white;font-size:18px;position:relative;padding-left:10%;padding-right:5px;">事项内容：</p>
    <textarea id="y" type="text" style="text-indent:1em;border-radius:10px;"></textarea>
    <button type="submit" id="hu" class="u" >提交</button>
    <button id="io" type="submit" class="u" @click="bc()" >保存</button>
    <!-- <button id="fh" type="submit" class="u" @click="fl()">返回</button> -->
    <router-link :to="{name: 'First', query: {id: this}}">返回</router-link>
  </div>
</template>
<script>
// import Vue from "vue";
// import laydate from './latedate.js'
export default {
  // mounted: function () {
  //   this.getname()
  // },
  methods: {
    fl () {
      // this.$router.push({path: './components/First.vue'})
      this.$router.push('/First.vue')
    },
    bc () {
      var id = this.$route.query.id
      window.localStorage.setItem('forid', id)
      window.localStorage.getItem('forid')
      var ct = document.getElementById('t').value
      if (ct.length === 0) {
        alert('事项名称为空')
      } else {
        window.localStorage.setItem('listname', ct)
        window.localStorage.getItem('listname')
      }
      // 存时间的值
      var co = document.getElementById('o').value
      if (co.length === 0) {
        alert('时间未选择')
      } else {
        window.localStorage.setItem('listtime', co)
        window.localStorage.getItem('listtime')
      }
      // 存内容的值
      var cy = document.getElementById('y').value
      if (cy.length === 0) {
        alert('内容为空')
      } else {
        window.localStorage.setItem('listneir', cy)
        window.localStorage.getItem('listneir')
      }
      // 创建一个数组取存这些数据
      // var slist = []
      // slist[0] = localStorage.getItem('listname')
      // slist[1] = localStorage.getItem('listtime')
      // slist[2] = localStorage.getItem('listneir')
      var slist = {}
      slist.name = localStorage.getItem('listname')
      slist.time = localStorage.getItem('listtime')
      slist.neir = localStorage.getItem('listneir')
      var qq = []
      Object.keys(slist).forEach(key => {
        qq.push(slist)
      })
      // window.localStorage.setItem('slist', JSON.stringify(slist))
      console.log(slist.length)
      var ss = []
      Object.keys(qq).forEach(key => {
        for (var i = 0; i < qq.length; i++) {
          for (var j = 0; j < ss.length; j++) {
            if (ss[j] === qq[i]) {
              break
            }
          }
          if (j === ss.length) {
            ss[ss.length] = qq[i]
          }
        }
        // ss.push(qq)
      })
      window.localStorage.setItem('slist1', JSON.stringify(ss))
      console.log(ss)
      this.$router.push({name: 'ListItem'})
    },
    sx () {

    }
    // getname () {
    //   this.state.store.content
    // }
  }
// data: {}
}
</script>
<style scoped>
* {
  background-color: #ee6363;
  margin: 0;
  padding: 0;
}
.ed {
  background-color: #ee6363;
  margin: 0;
  padding: 0;
}
.q {
  height: 60px;
  color:  black;
  padding-top: 30px;
  padding-left: 10%;
  font-family: 微软雅黑;
  font-size: 50px;
}
.e {
  padding-left: 10%;
  color: white;
}
#t {
  color: black;
  padding-top: 10px;
  margin-left: 20%;
  font-family: 微软雅黑;
  font-size: 20px;
  width: 65%;
  height: 30px;
  position: relative;
  background-color: white;
  margin: 0 10% 6% 25%;
}
#o {
  color: black;
  padding-top: 10px;
  margin-left: 20%;
  font-family: 微软雅黑;
  font-size: 20px;
  width: 65%;
  height: 30px;
  position: relative;
  background-color: white;
  margin: 0 10% 6% 25%;
}
#y {
  color: black;
  padding-top: 10px;
  margin-left: 20%;
  font-family: 微软雅黑;
  font-size: 20px;
  width: 65%;
  height: 400px;
  position: relative;
  background-color: white;
  margin: 0 10% 6% 25%;
}
.u {
  height: 50px;
  width: 100px;
  border-radius: 8%;
  color: white;
  margin: 0 10% 6% 25%;
  font-family: 微软雅黑;
  font-size: 20px;
  background-color: #ee6363;
}

</style>

还在完善中。部分代码有参考过网上的。