Vue官网todoMVC示例代码

这个示例是模仿官网示例样式和功能用我自己的方式写的，基本上没有看官网的源码，只参考自定义指令。让我们一步步来探讨一下。

要实现的功能

1. 单条添加todo
2. 单条删除todo
3. 双击编辑todo
4. 单条todo已完成相应样式状态改变
5. 全部todo是已完成相应样式状态改变
6. 清除全部已完成todos
7. 待办todos数量显示
8. 所有todos，已完成todos，未完成todos筛选

单条添加todo

<input type="text" class="todos_add" placeholder="what needs to be done?" 
@keyup.enter="addtodo($event.target)" //绑定enter事件
ref="currentinput">//操作input元素使enter一下之后清空输入框内容

data() {//一些初始化数据
 return {
  todolists: [],
  datastatus: ["all", "active", "completed"],
  datastatusindex: 0,
  whichshow: true,
  defaultshow: true
 }
},
addtodo(e) { //添加todo
 var val = e.value
 if (val === "") {return} //如果输入内容为空则立即返回
 this.todolists = this.todolists.concat({//使用concat这个api添加todo
  value: val, //输入内容
  isediting: false, //是否在编辑状态
  isactive: false, //删除x图标是否激活
  ischecked: false //是否已完成
 })
 this.$refs.currentinput.value = "" //按下enter添加todo之后把输入框value清零
 window.localstorage.setitem("content",json.stringify(this.todolists))//使用localstorage以json格式存储数据
},

把每条todo的对应状态都存在同一个对象当中，在操作改变todo状态的时候不会被统一处理，使得每条todo都有单独的状态。

单条删除todo

 <li class="content_todolist"
 v-for="(list,index) in todolists" 
 @mouseover="list.isactive = true" //鼠标移入todo改变对应todo的isactive状态
 @mouseleave="list.isactive=false" //鼠标移出todo改变对应todo的isactive状态
 <span class="el-icon-close content_todolist_delete" 
 :class="{show: list.isactive}" //动态绑定class使鼠标移动到某一todo显示x图标
 @click="deletetodo(index)"> //绑定删除单条todo事件
 </span>
</li>

deletetodo(index) { //删除单条todo
  this.todolists.splice(index, 1)//使用splice的api
  window.localstorage.setitem("content",json.stringify(todolists)) //以json格式存储数据//localstorage存储数据
},

在每个li元素上绑定了鼠标移入和移除的事件来动态的改变每个todo的isactive，然后再使用isactive动态显示class。

双击编辑todo&&单条todo已完成

<input type="checkbox" class="checkbox" 
v-model="list.ischecked">//双向绑定ischecked

<div class="content_todolist_main" 
@dblclick="toedit(list)" //双击事件
v-show="!list.isediting" //切换元素
:class="{deleted:list.ischecked}"> //动态绑定class该表已完成todo样式
{{list.value}}
</div>

<input type="text" class="content_todolist_main main_input" 
v-model="list.value" //双向绑定可输入value
v-show="list.isediting" //切换元素
v-todo-focus="list.value" //自定义指令，双击之后自动focus对焦
@blur="unedit(list)"> //绑定blur失去焦点事件

methods: {
 toedit(obj) { //使添加的todothing可编辑
  obj.isediting = true
 },
 
 unedit(obj) { //使添加的todothing不可编辑
  obj.isediting = false
 },
}

directives: { //自定义focus指令,需要一个binding参数做判断
 "todo-focus": function (el, binding) {
  if (binding.value) {
   el.focus()
  }
 }
}

通过每个todo里的isediting属性控制show和是否可编辑两个状态，双击div之后改变当前todo的isediting为true，从而显示为input，input失去焦点之后再通过blur事件改为false。

通过todo的idchecked来控制是否已完成，从而动态改变样式。

全部todos已完成

<span 
class="icon-down el-icon-arrow-down" //使用element库做向下箭头icon
v-show="todolists.length>0" //通过todolists控制是否显示向下箭头icon
@click="selectalltodos"></span> //全部已完成事件

selectalltodos() { //设置所有todo为已完成,使用map的api通过todo的ischecked属性操作
 this.todolists.map(todo => todo.ischecked = todo.ischecked ? false : true)
}

待办todos数量显示

<div class="data_times" v-show="times === 0"> //times为0显示item，大于0显示items，细节注定成败
 <span>{{times}}</span>&nbsp item left
</div>
<div class="data_times" v-show="times > 0">
<span>{{times}}</span>&nbsp items left</div>

computed: {
 times() { //使用计算属性计算待办todos的次数 
  let todoarr = this.todolists
  let times = 0
  for (let i = 0; i < todoarr.length; i++) {
   if (todoarr[i].ischecked === false) {
    times++
   }
  }
  return times
 }
},

使用了计算属性对todolists计算，用for循环刷选出idchecked为true的累加，最后返回times。

清除全部已完成todos

<div class="data_cleartodos" 
@click="cleartodos" 
v-show="times < todolists.length"> //如果待办事件次数小于总todolists长度就显示“clear completed”
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>
</div>

<div class="data_cleartodos" 
@click="cleartodos" 
v-show="times === todolists.length"> //如果待办事件次数等于总todolists长度就显示“clear completed”
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</div>

cleartodos() { //清空已完成的todolists，使用filter的api进行筛选
 this.todolists = this.todolists.filter(todo => todo.ischecked === false)
 window.localstorage.setitem("content",json.stringify(this.todolists)) //以json格式存储数据
},

如果待办todos的times小于todolists长度，就证明有已完成的todo，就可以显示“clear completed”，如果相等就说明没有已完成的todo。

三种状态筛选

所有todos，已完成todos，未完成todos筛选

<li class="content_todolist" 
v-show="defaultshow || (whichshow?list.ischecked:!list.ischecked)">

<div class="data_status">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 :class="{active: index === datastatusindex}" //动态class实现tab切换
 v-for="(item ,index) in datastatus" v-for循环
 @click="switchstatus(index)" //切换不同tab显示内容
 :key="index">
  {{item}}
 </a>
</div>

switchstatus(index) { //通过if条件判断操作
 this.datastatusindex = index
 if (this.datastatus[index] === "active") {
  this.defaultshow = false
  this.whichshow = false
 } else if (this.datastatus[index] === "completed") {
  this.defaultshow = false
  this.whichshow = true
 } else if (this.datastatus[index] === "all") {
  this.defaultshow = true
 }
},

我这里是同时if条件句判断操作，有点麻烦，目前还没有想出来其他方案。在li元素使用三元运算符和或运算符进行操作显示不同状态的todos。

完整代码

<style>
 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
 }

 input {
  outline: none;
 }

 ul,
 li,
 ol {
  list-style: none;
 }

 #app {
  width: 800px;
  height: 900px;
  margin: 0 auto;
  text-align: center;
  background-color: rgb(245, 245, 245);
  padding: 24px 0;
 }

 #app .header {
  font-size: 48px;
 }

 .content {
  width: 72%;
  margin: 0 auto;
  box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.25);
  position: relative;
 }

 .icon-down {
  position: absolute;
  font-size: 24px;
  top: 16px;
  left: 16px;
  cursor: pointer;
 }

 #app .content .todos_add {
  width: 100%;
  height: 56px;
  padding: 16px 56px;
  font-size: 24px;
  border: 1px solid transparent;
 }

 .content_todolists {
  position: relative;
  z-index: 3;
 }

 .content_todolist {
  display: flex;
  flex-direction: row;
  border-top: 1px solid #ccc;
  font-size: 24px;
  padding: 8px;
  background-color: white;
  align-items: center;
 }

 .checkbox {
  width: 20px;
  height: 20px;
  margin-left: 10px;
 }

 .content_todolist_main {
  flex: 1;
  text-align: left;
  margin-left: 16px;
  font-size: 20px;
  padding: 6px 0;
 }

 .main_input {
  position: relative;
  z-index: 1;
 }

 .content_todolist_delete {
  position: absolute;
  right: 16px;
  color: rgb(252, 55, 55);
  font-weight: 500;
  display: none;
  cursor: pointer;
 }

 .show {
  display: block;
 }

 .deleted {
  text-decoration-line: line-through;
  color: #bbb;
 }

 .show:hover {
  color: rgb(255, 0, 0);
  font-weight: 700;
 }

 ::-moz-placeholder {
  color: rgb(221, 218, 218);
 }

 ::-webkit-input-placeholder {
  color: rgb(221, 218, 218);
 }

 :-ms-input-placeholder {
  color: rgb(221, 218, 218);
 }

 .data {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  font-size: 14px;
  font-weight: 300;
  color: rgb(145, 145, 145);
 }

 a {
  text-decoration: none;
  color: rgb(145, 145, 145);
 }

 .data_times {
  width: 73px;
 }

 .data_cleartodos {
  width: 142px;
 }

 .data_status a {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 1px 4px;
  margin: 0 2px;
 }

 .data_status a:hover {
  border-color: #bbb;
 }

 .data_cleartodos a:hover {
  text-decoration-line: underline;
 }

 .active {
  box-shadow: 0 0 1px black;
 }
</style>

<body>
 <div id="app">
  <header class="header">todos</header>
  <div class="content">
   <span class="icon-down el-icon-arrow-down" 
   v-show="todolists.length>0" 
   @click="selectalltodos">
   </span>
   <input type="text" class="todos_add" placeholder="what needs to be done?" 
   @keyup.enter="addtodo($event.target)" 
   ref="currentinput">
   <ul class="content_todolists">
    <li v-for="(list,index) in todolists" class="content_todolist" 
    @mouseover="list.isactive = true" 
    @mouseleave="list.isactive=false"
    v-show="defaultshow || (whichshow?list.ischecked:!list.ischecked)">
     <input type="checkbox" class="checkbox" v-model="list.ischecked">
     <div class="content_todolist_main" @dblclick="toedit(list)" v-show="!list.isediting" :class="{deleted:list.ischecked}">
      {{list.value}}
     </div>
     <input type="text" class="content_todolist_main main_input" 
     v-model="list.value" 
     v-show="list.isediting" 
     v-todo-focus="list.value"
     @blur="unedit(list)">
     <span class="el-icon-close content_todolist_delete" :class="{show: list.isactive}" @click="deletetodo(index)"></span>
    </li>
   </ul>
   <div class="data" v-show="todolists.length>0">
    <div class="data_times" v-show="times === 0">
     <span>{{times}}</span>&nbspitem left
    </div>
    <div class="data_times" v-show="times > 0">
     <span>{{times}}</span>&nbspitems left
    </div>
    <div class="data_status">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{active:index === datastatusindex}" v-for="(item,index) in datastatus" @click="switchstatus(index)" :key="index">
      {{item}}
     </a>
    </div>
    <div class="data_cleartodos" @click="cleartodos" v-show="times < todolists.length">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>
    </div>
    <div class="data_cleartodos" @click="cleartodos" v-show="times === todolists.length">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
    </div>
   </div>
  </div>
 </div>
</body>
<script>
 let vm = new vue({
  el: "#app",
  data() {
   return {
    todolists: [],
    datastatus: ["all", "active", "completed"],
    datastatusindex: 0,
    whichshow: true,
    defaultshow: true
   }
  },
  computed: {
   times() { //使用计算属性计算待办todos的次数 
    let todoarr = this.todolists
    let times = 0
    for (let i = 0; i < todoarr.length; i++) {
     if (todoarr[i].ischecked === false) {
      times++
     }
    }
    return times
   }
  },
  methods: {
   toedit(obj) { //使添加的todo可编辑
    obj.isediting = true
   },
   unedit(obj) { //使添加的todo不可编辑
    obj.isediting = false
   },
   addtodo(e) { //添加todo
    var val = e.value
    if (val === "") {
     return
    } //如果输入内容为空则立即返回
    this.todolists = this.todolists.concat({ //使用concat这个api添加todo
     value: val, //输入内容
     isediting: false, //是否在编辑状态
     isactive: false, //删除x图标是否激活
     ischecked: false //是否已完成
    })
    this.$refs.currentinput.value = "" //按下enter添加todo之后把输入框value清零
    window.localstorage.setitem("content", json.stringify(this.todolists)) //使用localstorage以json格式存储数据
   },
   deletetodo(index) { //删除todo
    this.todolists.splice(index, 1)
    window.localstorage.setitem("content", json.stringify(this.todolists)) //以json格式存储数据
   },
   switchstatus(index) { //试下下方三个状态切换，略麻烦
    this.datastatusindex = index
    if (this.datastatus[index] === "active") {
     this.defaultshow = false
     this.whichshow = false
    } else if (this.datastatus[index] === "completed") {
     this.defaultshow = false
     this.whichshow = true
    } else if (this.datastatus[index] === "all") {
     this.defaultshow = true
    }
   },
   cleartodos() { //清空已完成的todolists
    this.todolists = this.todolists.filter(todo => todo.ischecked === false)
    window.localstorage.setitem("content", json.stringify(this.todolists)) //以json格式存储数据
   },
   selectalltodos() { //设置所有todo为已完成
    this.todolists.map(todo => todo.ischecked = todo.ischecked ? false : true)
   }
  },
  directives: { //自定义focus指令
   "todo-focus": function (el, binding) {
    if (binding.value) {
     el.focus()
    }
   }
  },
  created() {
   let mystorage = window.localstorage.getitem('content')
   this.todolists = json.parse(mystorage) || [] //因为todolists初始值是null,使用或运算符，如果为null设为空数组
  }
 })
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。