组件方式开发todolist

admin

/ r: I: v8 F' n3 Z

<template>
  <div id="App">
    <input v-model="inputValue" />
$ g: t! O$ c/ K+ ^/ Z% e8 @    <button @click="submit">Submit</button>
    <ul>
      <todoItem
" c; v4 h+ R3 L: f$ F        v-for="(item,index) in List"
9 k* r; p1 }+ G! D8 d" x        :key="index"
        :content="item"
: k  W) U4 v) l& f7 B- r) d        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
8 [$ p6 X1 t" I  </div>
</template>
$ U& }" Z0 K5 d' }. }. V0 I
, j/ @) F. I0 i& k3 ^+ r' T# K<script>
, Y) V3 X8 J0 R3 `, A) M5 n8 s5 Rimport todoItem from "@/components/item.vue";
! w* a" K$ m' \
: d& t# B2 x. @+ Jexport default {
8 b+ w2 e/ D7 r8 O# l4 E  data: function() {
/ x/ Q& }5 x# W$ |; l    return {
+ |8 v' s( h4 S: I/ B. S' x      List: [],
      inputValue: ""
3 g5 ~+ W# K8 t# S  x% t    };
# w9 |+ ?5 q4 l% j. z1 W  },
  components: {
& l& g" r/ K3 e    todoItem
1 t* z$ Q8 v8 p  },
1 x1 a+ \. V/ }0 W- S  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
8 e# C2 @5 z" G9 ^2 O0 B      }
: \2 X$ r# I8 g5 Y1 j, G      this.inputValue = "";
    },
    handleDelete: function(index) {
2 T4 R4 P7 W& y0 H4 Y$ c      this.List.splice(index, 1);
4 M3 E7 i$ |4 p% q    }
  }
};
</script>
; _( y0 K: v: E* A
1 t! o/ m- c6 t. ]$ I



8 S1 B9 v& \+ L7 Y

<template>
, k. f: l& S- n% u  <li @click="deleteItem">{{content}}</li>
</template>

6 g" D5 B7 X6 t5 a<script>
. ^' r+ S. K" Iexport default {
  props: ["content", "index"],
3 ~, V; m! h. H7 A1 k  data: function() {
( a! d! F6 a+ v0 c, e    return {};
  G/ N+ Z8 x( y+ H2 P  },
  methods: {
6 g, k2 j$ \3 u    deleteItem: function() {
      this.$emit("delete", this.index);
% O% p& W( e; ^4 q' V+ I$ j  S, N    }
  }
};
  G9 K! e+ U. @" Z</script>
: c3 d& f8 a7 Y



0 x. S2 @% x5 ?: {2 r