组件方式开发todolist

admin

5 P* w/ d" s  V5 q+ v( y

* R8 _2 r4 u  b3 E& q7 Y<template>
  <div id="App">
! d1 {5 x/ {8 b  P0 g- g    <input v-model="inputValue" />
& c  D6 u, x4 W, w    <button @click="submit">Submit</button>
7 f( @# R* x$ k1 o/ T    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
; e8 r# _4 D. ?% ]" X: l    </ul>
$ {) n, C# G' V+ s8 v* }7 Y: y  </div>
0 C5 z0 {8 j+ D</template>
. c0 e; }1 ]3 d5 \
# I2 E0 Z" G% c8 a4 Y% [9 e<script>
7 B# k: o  A+ Mimport todoItem from "@/components/item.vue";

export default {
  data: function() {
- \9 Z7 B: t- N6 ?9 n' [) X    return {
      List: [],
9 F0 a. B2 o1 x      inputValue: ""
8 u. s) U/ u0 o" z/ @    };
5 [& t, {0 d- R  },
8 N2 Q  U6 n" R* k! Y6 K  components: {
4 e. d& K) d! L9 P" \2 A7 w7 Q    todoItem
  },
2 w( u" f; u# k  methods: {
    submit: function() {
* @" V. u: @' ]' y! }      if (this.inputValue != "") {
: x; l5 l7 \/ s& L& C        this.List.push(this.inputValue);
, a+ ]# U/ F, m& k% Q& Q      }
+ w. h& w# b8 C, P4 d      this.inputValue = "";
  f; {' z$ B" O) C    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
, O8 n/ s! z7 h. X  }
};
3 c+ z& f3 n3 d% @! H& b</script>
- Q: s5 Y4 c* r/ N




4 i3 I4 |1 \6 I5 s
# ^1 V6 g4 i) t$ U7 x# p+ M5 Q/ R
<template>
2 u" f" i" y4 {2 c3 Q- e; G  <li @click="deleteItem">{{content}}</li>
+ a, o. N& _% J4 P- b: y! V</template>

<script>
export default {
/ B$ S) M. ]& @* C  props: ["content", "index"],
: k, t/ {- k, I$ m. Y  data: function() {
    return {};
% T! A* Z$ [) |4 x7 T* J  },
  methods: {
3 O0 p4 b; O0 K1 T& D    deleteItem: function() {
      this.$emit("delete", this.index);
    }
3 x% Z$ [% w8 n$ a( V7 R* D, Q  }
};
</script>
5 j1 \& X& ^7 ?# M) c( t& {
2 J4 C. b9 f+ W2 ?

, X# g2 N3 N5 S4 M# a
! |) H$ J* Y( n