组件方式开发todolist

admin

8 a8 e* J6 [  _+ S) G
2 I7 v) A1 H7 F; e- W% O
<template>
6 w$ T; I6 O9 l5 F/ A  <div id="App">
) E- S0 Y5 M% q3 ^    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
, `, `, W, K( w0 [, s    </ul>
  </div>
</template>

<script>
& a3 x4 m$ J. |import todoItem from "@/components/item.vue";
" h- _1 n7 i, T
, ]4 ?4 t9 O+ c  l3 aexport default {
  data: function() {
    return {
* t7 a4 v+ ?3 c$ Y% H" p9 l. F      List: [],
      inputValue: ""
    };
  },
  components: {
    todoItem
  },
$ v5 e  ~8 t+ v7 j5 @0 M: X$ u  methods: {
9 L1 Y$ z2 S  |& `. t" A    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
: L, b2 O# E* U# V) ~( \0 B      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
, t- p! i; h. F: W# C! \" s  }
6 g: p, @7 n, i2 F- V- W};
</script>


) W2 H$ I: P" T7 k

. e3 q. A7 x9 m# n9 L% u/ i


% `: K) s7 i  E# |5 g% ^<template>
  <li @click="deleteItem">{{content}}</li>
8 u: O7 i7 L$ h3 ?</template>

9 ^% b+ ~7 y6 N) F3 s<script>
! k( b8 B2 C4 H6 Zexport default {
  props: ["content", "index"],
  data: function() {
    return {};
# ~1 e- A6 f' y5 h  },
; r" N$ h1 E8 S/ `! i' b4 C7 f% G& g  methods: {
* t& L! o8 y4 ^    deleteItem: function() {
. M: s' u. j  v      this.$emit("delete", this.index);
    }
  }
" m6 z* _. N  L* t: z5 R" v) w};
7 }: L9 v/ \* i6 I6 O' R</script>
8 _  R4 ^' J4 D
; T; e! F! Y0 f. k# C. V; d
' N. w% y! H5 D: S- D6 {* M) v
: j: S% p. w# p- K9 I5 j