IMWeb训练营-VUE-ToDoApp

来源：互联网发布：中国航天软件评测中心编辑：程序博客网时间：2024/05/16 02:37

时间太赶，简单写一个。

HTML结构

<!DOCTYPE html><html lang="en">  <head>    <title></title>    <meta charset="UTF-8">    <link href="https://cdn.bootcss.com/normalize/6.0.0/normalize.css" rel="stylesheet">    <link href="css/style.css" rel="stylesheet">  </head>  <body>  <div id="app">    <div class="todo-box">      <p>{{ message }}</p>      <input       v-on:keyup.enter="addTodo"      v-model="newTodo"      type="text"      name="todo"      value=""      placeholder="What need to be done?" />    </div>    <div class="todo-content">      <ul>        <li v-for="item in todos">          <div class="todo-item">            <input type="checkbox">            <label> {{item.task}}</label>          </div>          </li>      </ul>    </div>  </div>  </body>  <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script></html>

CSS

<style>      #app{        width: 100%;      }      .todo-box{        text-align: center;      }      .todo-box p{        font-size: 30px;      }      .todo-box input{        padding: 0 20px;        font-size: 24px;        outline: none;        width: 300px;        height: 50px;        line-height: 50px;      }      .todo-content{        font-size: 24px;        width: 344px;        margin: 0 auto;        height: auto;      }      .todo-content ul{        list-style: none;        margin: 0;        padding: 0;        }      .todo-item{        width: 344px;        height: 50px;        line-height: 50px;        background: blueviolet;        border: 1px solid slategray;      }    </style>

JavaScript

  // localStorage persistence  var STORAGE_KEY = 'todos-vuejs-2.0'  var todoStorage = {    fetch: function() {      var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')      todos.forEach(function(todo, index) {        todo.id = index      })      //      todoStorage.uid = todos.length      return todos    },    save: function(todos) {      localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))    }  }  // app Vue instance  var app = new Vue({    el: '#app',    data: {      message: 'Vue Todo App',      newTodo: '',      todos: todoStorage.fetch()    },    methods: {      addTodo: function(){        // 检测无效输入        var value = this.newTodo && this.newTodo.trim()        if (!value) {          return        }        this.todos.push({          task: this.newTodo        })        this.newTodo = ''      }    }  })

运行效果

0 0