组件方式开发todolist

admin

( V* I, c0 i  f! K# @<template>
# @: Q* j. A* K" E. v  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
) R. a2 }+ D6 r- f    <ul>
      <todoItem
$ @( M, U# B8 ?% K6 U        v-for="(item,index) in List"
        :key="index"
        :content="item"
' |* N! Y! ?& E4 ]8 I/ @% L, `        :index="index"
9 _3 _. a! M) a9 c        @delete="handleDelete"
$ C) E+ n) o+ b. N! i$ R      ></todoItem>
0 s6 ^# J3 j2 C' Q+ E    </ul>
  </div>
</template>
* z/ f9 N. Z' O  F& Z" l1 \
<script>
, B; e2 F! r) f. @import todoItem from "@/components/item.vue";

# P' o) ^( I7 j+ k9 l$ ^1 vexport default {
  data: function() {
    return {
) K  `/ ?7 r# D$ z8 E8 Q, N4 h      List: [],
      inputValue: ""
6 r" Q3 E$ z3 y. M    };
& k& s$ B! x9 Q& t  },
  components: {
3 A; v: A% O( x" h. ?    todoItem
$ p* Q4 @4 [4 d3 r: P5 H  },
. r4 ~! p! \$ x2 T1 Y8 f  methods: {
    submit: function() {
; s: y  Q+ s. S% A5 u. S: m      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
0 ~( ]: F1 U; Z; `2 F    },
    handleDelete: function(index) {
0 X* C1 R- j, I$ _: B* _      this.List.splice(index, 1);
    }
  }
};
: L% Y0 o! R* ^: L</script>

4 w) |4 ?+ ^5 h: i2 K


! l: y/ o; A" q( o4 u4 C


# M. X' H* G! o9 l: ~/ n$ J<template>
  <li @click="deleteItem">{{content}}</li>
</template>
0 T+ N( J  n! {7 Y$ q
<script>
7 f7 {. U5 G2 d! P1 y7 }. mexport default {
  props: ["content", "index"],
1 \3 _& q4 ~; U8 M  data: function() {
7 ^* i% L$ Q# E- I    return {};
4 K! E4 U, ^0 e+ e' l  [  P  },
/ p0 r% w  o2 k6 f; I. ~( Y8 k  methods: {
" i4 j! p  |4 {$ b' O    deleteItem: function() {
  `" ~) I  G" a0 A- ~4 r9 E      this.$emit("delete", this.index);
    }
  }
9 ]. n: a& \  _: _: m; _3 L};
' R; f+ I( M* ?& h</script>
7 ^; c1 C( Q6 J8 \+ K% t- n* g0 _

8 O% Q- v! q; S5 x; [( a0 Z