组件方式开发todolist

admin

$ F! ?9 n0 x. E1 m5 `

: I' m" t" `% I6 v$ u<template>
  <div id="App">
2 U& p: \2 S* j8 F    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
# v0 q+ k7 c& v    <ul>
      <todoItem
/ h* q: x& B! a- C2 _, D        v-for="(item,index) in List"
        :key="index"
) S6 Y8 F  ~% D1 W3 [2 p        :content="item"
        :index="index"
8 v6 X2 H( Q$ I2 }! \        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
</template>
* e) s. Y6 h4 k$ c
- o: ~3 R: X2 _8 c<script>
import todoItem from "@/components/item.vue";
/ F9 G/ ]( @- @9 W. Z/ w2 ~7 e- f* l
  w0 w7 T. W; V8 O5 ?4 J- Gexport default {
  data: function() {
    return {
      List: [],
" ~3 N# X3 {* W- U      inputValue: ""
    };
: U8 V" M7 O& `, U% h  },
3 i7 M0 X- Y, v! P5 l2 U  components: {
    todoItem
  },
  methods: {
' q( r: i: Z' I) Y    submit: function() {
( d  [4 p: y+ l      if (this.inputValue != "") {
1 f) d$ x8 c% Z        this.List.push(this.inputValue);
* P5 ^) o& v1 y, p( f* A* b      }
* U, r* V5 k5 T      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
1 I; @$ B% i% V0 ^/ P+ T8 D4 Z    }
  }
  x$ k! g/ L3 E" E};
# j0 @8 }- t" \$ I% g& _6 \- V</script>
6 U" M) v/ A1 T( C! v+ N
) v$ `, }$ q  ^2 F6 B% k# t
% E7 ~* z- U5 i' h6 q

0 G5 s3 }8 C) i7 Q# i4 [

8 W) [2 C* I: u6 r( b0 Z
<template>
  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
  props: ["content", "index"],
  data: function() {
/ y& U! j. X) }) T, K5 s8 [    return {};
  },
  methods: {
. n( r" [7 X) U1 K7 J    deleteItem: function() {
1 Y) K& h1 y0 d  |4 ?8 j/ u7 R      this.$emit("delete", this.index);
! y7 c4 Q+ b  `) u3 l3 y9 c7 e    }
6 ]+ \! h; a1 T- v  }
};
</script>
4 j& h5 Y( y0 I% \1 M

: b$ w7 k8 {( e
2 e4 P1 z2 L6 Q* H1 Q: z
$ _8 J  _( x# C3 @  v# ~( E; `