vue.js 练手--简单ToDoList

最新推荐文章于 2020-07-08 15:07:39 发布

a79149884

最新推荐文章于 2020-07-08 15:07:39 发布

阅读量302

点赞数 1

分类专栏： vue.js

本文链接：https://blog.csdn.net/a79149884/article/details/77053618

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小白自学前端，做个todolist练手（vue.js ）， css样式都没写（orz）~

HTML 代码：

 
  <!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 
  >todolist 
  </ 
  title 
  > 
 
 
  < 
  script 
  src= 
  "https://unpkg.com/vue" 
  > 
  < 
  / 
  script 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 
 
  < 
  div 
   id= 
  "todoList" 
  > 
 
 
  < 
  header 
  > 
 
 
  < 
  input 
  type= 
  "text" 
  v-on:keyup. 
  enter= 
  "todoAdd" 
  v-model= 
  "value" 
  > 
 
 
  </ 
  header 
  > 
 
 
  < 
  main 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  header 
  >待办事项 
  </ 
  header 
  > 
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
   v-for= 
  "value in unfinish" 
  > 
 
 
  < 
  span @ 
  click= 
  "editTodo(value)" 
  v-if= 
  '!value.edit' 
  >{{value.value}} 
  </ 
  span 
  > 
 
 
  < 
  input 
  v-else 
  v-model= 
  "value.value" @ 
  keydown. 
  13= 
  "saveTodo(value)" 
  type= 
  "text" 
  > 
 
 
  < 
  button 
  v-on:click= 
  "todoDel(value)" 
  >删除 
  </ 
  button 
  > 
 
 
  < 
  button @ 
  click= 
  "finish(value)" 
  >完成 
  </ 
  button 
  > 
 
 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  header 
  >完成事项 
  </ 
  header 
  > 
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
   v-for= 
  "value in finishtoDo" 
  > 
 
 
  < 
  span 
  >{{value.value}} 
  </ 
  span 
  > 
 
 
  < 
  button 
  v-on:click= 
  "todoDel(value)" 
  >删除 
  </ 
  button 
  > 
 
 
  < 
  button @ 
  click= 
  "redoTodo(value)" 
  >重做 
  </ 
  button 
  > 
 
 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  main 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  script 
  src= 
  "app.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 

JavaScript 代码：

 
  var 
  test = 
  new 
  Vue({ 
 
  el: 
  '#todoList', 
 
  data: { 
 
  value: 
  '', 
 
  list: [], 
 
   }, 
 
  computed: { 
 
  finishtoDo: 
  function () { 
 
  return 
  this. 
  list. 
  filter( 
  x 
  => 
  x. 
  finish); 
 
   }, 
 
  unfinish: 
  function () { 
 
  return 
  this. 
  list. 
  filter( 
  x 
  => ! 
  x. 
  finish); 
 
   } 
 
   }, 
 
  methods: { 
 
  todoAdd: 
  function ( 
  event) { 
 
  if ( 
  this. 
  value === 
  '') { 
 
  return 
 
   } 
 
  this. 
  list. 
  push({ 
 
  value: 
  this. 
  value, 
 
  edit: 
  false, 
 
  finish: 
  false 
 
   }); 
 
  this. 
  value = 
  ""; 
 
   }, 
 
  todoDel: 
  function ( 
  value) { 
 
  this. 
  list = 
  this. 
  list. 
  filter( 
  x 
  => 
  x !== 
   value); 
 
   }, 
 
  finish: 
  function ( 
  value) { 
 
  value. 
  finish = 
  true; 
 
   }, 
 
  redoTodo: 
  function ( 
  value) { 
 
  value. 
  finish = 
  false; 
 
   }, 
 
  editTodo: 
  function ( 
  value) { 
 
  value. 
  edit = 
  true; 
 
   }, 
 
  saveTodo: 
  function ( 
  value) { 
 
  value. 
  edit = 
  false; 
 
   } 
 
   } 
 
   })