组件方式开发todolist

admin

5 I" z1 h& U$ C5 ?2 m% U; T4 v
7 }. Y' w. H$ G) w* L! C

<template>
  <div id="App">
    <input v-model="inputValue" />
2 r! z' _" A  W' ], a! w    <button @click="submit">Submit</button>
    <ul>
5 Z+ b& d1 @7 H7 P; V; r  ^  A+ Z; \      <todoItem
; P4 B. \  s+ @        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
) m8 K, r- ^; [) N2 g        @delete="handleDelete"
% t. N3 w" x) _; }  w" V7 X      ></todoItem>
: \1 M8 r3 ], ?7 s8 I    </ul>
) K; n- a- Y% i. c0 Z5 i5 M) _  </div>
$ S. i* F$ E5 H</template>

6 C$ @' T5 e! r* u<script>
import todoItem from "@/components/item.vue";

. F9 I) W, x1 d' ^5 T9 [export default {
  data: function() {
    return {
      List: [],
      inputValue: ""
    };
/ N' R4 ]' B3 ]9 u. U2 `( Z4 o  },
  components: {
4 J% c+ \) Y/ o+ W/ ?    todoItem
" Q% _( N2 k# E7 O  },
  methods: {
    submit: function() {
1 G: k2 W- O, h      if (this.inputValue != "") {
( g) @. E1 ]) ?* J& j2 c        this.List.push(this.inputValue);
. A, z1 ]- `4 h; ~" v      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
7 b) H0 b6 P9 F      this.List.splice(index, 1);
    }
9 _/ |+ m* z8 u4 g  }
};
2 f: [$ z, U, a* @</script>
, o& t2 t4 b) G
  z1 \0 _* V1 y* b; M3 m7 F

% X$ F& M: k" X

6 }1 G4 A& u3 ?3 m

<template>
  <li @click="deleteItem">{{content}}</li>
</template>
3 O5 H" y; b) n5 [( a2 E
<script>
6 U' x7 v  v& f1 ?. U1 Y6 ?export default {
8 r. Z0 t$ w2 V" s7 H) `7 H5 L  props: ["content", "index"],
! x3 Z$ y9 ~# c4 c* [7 x  data: function() {
    return {};
! X0 H  P; o9 {7 I/ w3 r  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
4 W: {( w6 A. i  _0 S0 a8 u  }
2 V  P8 Q! R9 p+ t8 C};
</script>

6 k+ v+ E3 z7 Y7 _: g
7 s' N' o/ o5 l  C( E" t$ v2 C/ {

, u, Q, h2 @  s2 P+ z1 a: [) `/ S8 A. U