vue实现todolist-02todolist

参见效果：http://www.todolist.cn/

用vue实现这个功能下面上可运行的代码

复制走可以运行：

<!--body里面的内容-->
<div id="app" v-bind:class="{alldiv:imgflag}">
<br>
<img v-bind:src="src" v-bind:class="{'img':imgflag}">
<br>
<br>
<input v-model="inputValue" v-on:keydown="dokeydown($event)" v-bind:class="{inputClass:inputClassFlag}" 
       type="text" ref="inputValue" placeholder="请输入..."/>
<input type="button" value="添加" v-on:click="thatadd()"v-bind:class="{thatok:inputClassFlag}"/>
<br>
<hr v-bind:class="{hrStyle:inputClassFlag}">
<div v-bind:class="{title:inputClassFlag}">正在进行：</div>
<br>
<ul>
	<li v-for="(item,key) in todoList" v-if="!item.checked">
        <div style="background-color: gray">
          <span><input type="checkbox" v-bind:class="{checkboxStyle:inputClassFlag}" v-            model="item.checked"  v-on:change="saveList()"/></span>
          <span style="line-height: 2.5">{{item.title}}</span>
          <span v-bind:class="{btStyle:inputClassFlag}">
          <input type="button" value="删除" v-on:click ="thatdel(key)"v-bind:class="{thatdel:inputClassFlag}"/></span>
        </div>
	</li>
</ul>
<div v-bind:class="{title:inputClassFlag}">已经完成：</div>
<br>
<ul>
	<li v-for="(item,key) in todoList" v-if="item.checked">
	  <div style="background-color: gray">
          <span><input type="checkbox" v-bind:class="{checkboxStyle:inputClassFlag}" v-model="item.checked" v-on:change="saveList()"/></span>
          <span style="line-height: 2.5">{{item.title}}</span>
          <span v-bind:class="{btStyle:inputClassFlag}">
          <input type="button" value="删除" v-on:click="thatdel(key)"v-bind:class="    {thatdel:inputClassFlag}"/></span>
  	  </div>
	</li>
</ul>
</div>

<!--js脚本-->
<script>
export default {
  name: 'app',
  data () {
    return {
      imgflag:true,
      src:'http://d.ifengimg.com/mw978_mh598/p2.ifengimg.com/cmpp/2018/07/10/06/05506c4a-f768-4a14-bbab-397efb729f3e_size171_w1024_h683.jpg',
      inputValue:"",
	  inputClassFlag:true,
	  todoList:[]
    }
  },
  methods:{
    //添加
    thatadd(){
      //var values=this.$refs.inputValue.value;
      var values=this.inputValue;
      if(values!=""){
        this.todoList.push({
          "title":this.inputValue,
          "checked":false
        });
        this.inputValue="";
        localStorage.setItem("list",JSON.stringify(this.todoList));
      }else{
        alert("请输入");
      }
    },
    //删除
    thatdel(key){//下标
      this.todoList.splice(key,1);
      localStorage.setItem("list",JSON.stringify(this.todoList));
    },
    //回车添加事件
    dokeydown(e){
      if(e.keyCode==13){
        this.thatadd();
      }
    },
    //勾选改变事件
    saveList(){
      localStorage.setItem("list",JSON.stringify(this.todoList));
    }
  },
  mounted(){
    console.log("生命周期函数：刷新页面后执行");
    var list=JSON.parse(localStorage.getItem("list"));
    if(list){
      this.todoList=list;
      }
  }
}
</script>

<!--css-->
<style lang="scss">
.alldiv{
  margin: 0 auto;
  width: 70%;
  min-width: 750px;
}
.img{
  width: 400px;
  height: 200px;
}
.title{
font-size: 25px;
font-weight: bold;
}
.inputClass{
width: 250px;
height: 25px;
}
ul{
width: 70%;
}
li{
width: 70%;
height:50px;
}
.thatok{
margin-left:2%;
width: 60px;
padding: 4px;
height:30px;
cursor: pointer;
}
.thatdel{
width: 60px;
padding: 4px;
height:30px;
cursor: pointer;
}
.hrStyle{
width: 100%;
}
.btStyle{
float: right;
margin-right: 1%;
margin-top: 1%;
}
.checkboxStyle{
height: 17px;
width: 28px;
vertical-align: sub;
}
</style>

说一下大概思路：

1：这里面涉及到了一些vue标签，如v-model=""，v-bind:src="{"class",""}，v-on:click="点击事件()",，v-if="",v-for=""等这些基础的标签看看官网就知道了，多用几次习惯了就好了，我也第一次用，感觉还行吧，常用就好了；

2：功能实现上我们都知道vue是双向绑定的，所以要实现这个功能主要就是对里面的一个选中和未选中进行绑定判断

3：首先我们声明一个list，然后将输入框的内容添加到这个list中，添加的同时默认的给他设置成为对象，并将里面添加一个"checked"属性，默认为false，这样我们点击确定添加时等于不断为这个list赋值，不断为list里面增加对象

4：然后我们用v-for标签循环输出这个list，其中括号里面的itme为这个循环中的某一条对象，key则为这个对象在list中的下标，这个下标是我们在删除时要传入的参数

5：当实现添加，删除功能后我们在实现这个勾选效果，我们就在这个li标签上通过v-if=“条件”,来决定这个li显示不显示，我们在未完成时设置条件为v-if="!item.checked“，在完成时条件设置为v-if="item.checked“,通过这两个条件决定我们的数据是显示在未完成里面还是显示在已完成里面

6：走到这一步，功能基本实现了，就是未完成和已完成的数据是一样的，接下来在对这个勾选作文章，因为每一条li都代表是list中的一个对象，而这个对象中都有一个共同的属性checked，而我们的已完成还是未完成也是通过判断当前对象中的这个checked是true还是false来决定这条数据是显示在哪个地方的，所以基于这个我们在在这个勾选框里面通过v-model="item.checked"进行双向绑定，因为默认的checked是false，满足未完成条件所以是在未完成一栏中的，而当我们勾选它时，他就会变为true，因为它变为true已经不满足了未完成v-if的条件所以这条数据就不会在未完成中显示，同时因为它变为了true满足了已完成的条件，所以他就在已完成一栏目中了，这其实也就是veu中的数据双向绑定造成的

7：最后还有一个mounted这个生命周期函数，刚刚接触，这个函数是在刷新页面时执行的，添加这个就是为了在刷新页面时通过缓存localstorage将我们每次添加删除时对list的改变写入缓存，每次刷新时保证数据不会清空

这是我的个人理解，描述的可能有点乱..真要实现这个功能还需要一步一步的来，有什么描述的不合适的地方多多指教~~

vue实现todolist-02todolist

猜你喜欢