Vuejs 实现简易 todoList 功能与组件

todoList

结合之前 Vuejs 基础与语法

使用 v-model 双向绑定 input 输入内容与数据 data
使用 @click 和 methods 关联事件
使用 v-for 进行数据循环展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TodoList</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <li v-for="(item,index) of list" :key="index">
        {{item}}
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        inputValue: '',
        list: []
      },
      methods: {
        handleSubmit: function(){
          this.list.push(this.inputValue)
          this.inputValue = ''
        }
      }
    })
  </script>
</body>
</html>

View Code