组件方式开发todolist

admin

6 H1 D2 d* V/ a+ ~
6 I: t1 ~- S: V% o" e/ x

+ y0 h1 M8 s4 b2 u6 t& F<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
/ K4 _4 u- f7 k3 Z    <ul>
      <todoItem
, j5 i) q4 M. K4 U) B: V' o        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
( [  E! e3 Q, k  </div>
6 T, q1 w+ E+ b" Y, @</template>

<script>
import todoItem from "@/components/item.vue";

/ [3 y: C" D0 C; r! |2 mexport default {
8 p. w( v# {- f: \  data: function() {
- s# f+ Y! ^5 b7 `    return {
- A6 J' u' {8 [4 {0 k) E      List: [],
      inputValue: ""
    };
  },
  components: {
    todoItem
! ?( M* n& W$ L& `5 B1 r  },
9 V+ e0 S, b7 H  methods: {
    submit: function() {
4 p( K: R, K8 H. b+ J( n      if (this.inputValue != "") {
        this.List.push(this.inputValue);
% _: Z! h! d  G      }
      this.inputValue = "";
  ?& u; i% l) E6 q' \1 R    },
, \+ \5 Q! }+ U3 B9 c    handleDelete: function(index) {
: V0 i# q: f5 v9 K* D      this.List.splice(index, 1);
3 e# M; y! {2 q+ @% F# t2 K    }
& Q- J0 ?1 q; j  N  }
5 S8 q; B% h' T3 f$ v};
$ w. [/ K, [. f5 D+ H+ {. F  d</script>




' U4 {! ?" {1 x) i7 o

; Q* ]0 h6 g) T, a5 L8 Z; T
  p" ^; K& V  J! E$ C" E$ x) B<template>
- f, L* B! f: K0 `* `  <li @click="deleteItem">{{content}}</li>
</template>
: d. @# m, Y9 k( \
<script>
7 H/ S" Q% W# u) S1 Z$ N8 b: Vexport default {
  props: ["content", "index"],
  data: function() {
    return {};
  },
& {. ^6 B6 z9 u! J, A  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
+ z2 D3 x. A* x( w) B5 c  }
$ x- J7 {# g! ~! A6 x* o$ A4 r2 D};
</script>
! d" z) h0 X3 i; m2 d5 }. h0 }
: r; P3 t; h7 L( P
4 d. C+ j( e! h- Y: w' z5 w1 `
; L3 l$ F( @, `