组件方式开发todolist

admin

, Z0 q+ [# |% G  |


<template>
; t- i7 b* \. K) U+ r3 H1 C% H8 _  <div id="App">
: y3 n" w1 h/ ~# R$ z- _+ \    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
7 M9 F' I9 ?% x0 ~, ^    <ul>
      <todoItem
. z5 V' T. ]4 @        v-for="(item,index) in List"
, D, Y4 j, D- d, R        :key="index"
        :content="item"
  x9 c; S7 c" U5 y9 p! B- D+ W1 k8 }        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
& B0 A4 b8 j  H4 Y  </div>
! R# ^/ E- h/ i& p1 C</template>
; z- W1 R8 G9 s4 @; U- T0 S
, D  T6 [3 o! _$ k2 i* g<script>
import todoItem from "@/components/item.vue";

/ d- F+ p1 K/ N: l/ Vexport default {
9 Z; G8 W# ?1 [4 ~  data: function() {
    return {
/ h1 i9 Q8 M2 f% ?, }4 v! J      List: [],
      inputValue: ""
    };
$ ~+ ~( ?4 ]' f9 c  },
' N+ T' z. e9 s1 g9 G. {" x* q+ f( f  components: {
3 t4 C$ M2 ~; y% s    todoItem
  },
  methods: {
  n2 ~, r. [  T- K    submit: function() {
: j, \6 [8 v+ @) V8 E      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
/ z/ R+ e4 n5 m- I4 X/ f3 q      this.inputValue = "";
    },
    handleDelete: function(index) {
- s/ H6 }5 r* W, c* j      this.List.splice(index, 1);
    }
& V0 l- F8 t( \3 @) c2 a  }
};
</script>
  h" K' q* s' [

2 s; B8 |5 S1 z+ f& _
0 \# v  f3 `* v$ h! h, a) V3 S
; d* x, }9 ]7 R" N# ~3 p/ b
7 ]6 s; K2 c) U6 i- j/ k
" E# w6 X* g; G7 D
<template>
- o  n% \4 i! M* [  <li @click="deleteItem">{{content}}</li>
$ |' [1 f; ~& ~( R# A* r- P) Z</template>

<script>
1 J& d' z5 q( D- {' f3 V; A6 \3 N8 nexport default {
  props: ["content", "index"],
  data: function() {
    return {};
  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
. l4 C& _, K' X, y    }
  }
$ B7 r" w1 Y8 @};
* B( ?8 [; P" M</script>

/ m& K& R& s6 q: ]& }% \+ X  L2 N

- F; y1 ]  n' s- E
' c0 c; `3 }/ @. f4 G, _