组件方式开发todolist

admin

! r9 m, Z, t; K<template>
* `& Z* `6 P. a, A. c0 t  <div id="App">
    <input v-model="inputValue" />
) A* H! C) ~2 j8 h/ B9 W( E0 K    <button @click="submit">Submit</button>
) \8 P) E* Q1 q7 O7 Z% Q    <ul>
      <todoItem
        v-for="(item,index) in List"
5 S3 g+ V  n6 G6 B$ g        :key="index"
        :content="item"
        :index="index"
) F0 |' y% A- e, i( d  w        @delete="handleDelete"
. K3 F. |1 F! G6 g  ~# d      ></todoItem>
    </ul>
  </div>
</template>

<script>
import todoItem from "@/components/item.vue";
0 G. v& l2 N: M. E6 @- R9 e
export default {
; g6 S$ Y( x+ T  data: function() {
    return {
      List: [],
$ ?+ M4 |, Y0 f1 C( u+ S2 {      inputValue: ""
    };
, f( o- _& k7 d" m) A" k" G  },
  components: {
    todoItem
) E8 P+ O3 N$ x. t4 ]2 K$ X  },
- M& y% [1 b9 L; O/ L# c  methods: {
6 p5 S: q4 w& q) q- |8 ?    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
8 B$ M3 @' |4 |; v. S3 D8 E5 a      }
      this.inputValue = "";
, u4 }+ V/ `2 V    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
9 y) [5 {0 _! _& R6 u# v  }
7 u( W" z! N. s};
</script>

* }. R0 Y$ B+ s# K% P( q& U

/ `6 G" w* g+ S: D/ W, n
7 W  L* }0 N1 M" A


<template>
7 D0 d- m0 M# Q  <li @click="deleteItem">{{content}}</li>
& h5 n. Q2 H3 T</template>
; Q4 R7 T7 i0 i! V9 B! ]
' N6 i! m4 V* b7 F- B<script>
export default {
0 B& G8 l* }7 v. I0 L9 E1 }& ?  props: ["content", "index"],
  data: function() {
    return {};
9 W5 C. ^# X% M5 V' A, @  },
  methods: {
5 e# h% t, }, n  E7 Q    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
</script>




1 n, V% @7 p& x$ p4 l* j