组件方式开发todolist

admin

; F$ ^( S; k; Y- d% W- r7 c2 H7 x& S


# m) ]& p) E( g<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
  g3 Y9 ^0 R3 k; e0 \, b    <ul>
      <todoItem
* v# d$ A" [. g& f        v-for="(item,index) in List"
( G+ [$ m7 K# ?3 J- w2 |: P        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
2 }9 }2 e5 o8 c6 C, N      ></todoItem>
, x8 A& X! |" N& w    </ul>
1 ]0 W! G# U# ?7 z  </div>
</template>
: o% Y$ T7 P" p3 t: `+ u
<script>
import todoItem from "@/components/item.vue";

export default {
/ U% I3 X  j: t+ }  data: function() {
5 [# y4 f! ]! B: h5 K7 }$ o    return {
      List: [],
      inputValue: ""
    };
  },
7 w/ u4 v  S+ u) Q  components: {
$ z* R8 x9 D3 l+ Z; F1 S    todoItem
; {& T# f- s$ f  },
: @: X8 t+ C' ]. p; z) r5 ~+ @) n  methods: {
: J& S/ m* Q$ O4 Q    submit: function() {
' e7 O1 g$ v& c9 L8 F/ b% X      if (this.inputValue != "") {
        this.List.push(this.inputValue);
% ?. f% D6 f3 g7 d$ r. t      }
      this.inputValue = "";
4 {$ u1 l" H6 }$ m; o. Q( Y" W    },
# Z4 D3 D  I4 k    handleDelete: function(index) {
      this.List.splice(index, 1);
9 \) D9 q4 f0 M- ?! O    }
  }
$ i! P8 [- e+ X# b9 K& J  ]};
1 Y" J( h+ p. y" Q# ~. t3 q</script>



; |6 c* R  z" y# q& T2 Q, e



<template>
  <li @click="deleteItem">{{content}}</li>
</template>

6 r% i# O  F) R7 A: N: f5 a6 P; X<script>
2 n/ [+ c$ H! Y( V. Yexport default {
  props: ["content", "index"],
% y1 ]; D( R/ {  P! R9 K  data: function() {
8 g) s. G- J& y    return {};
  },
4 T1 s2 [- \& j- L3 E$ E9 o  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
4 |6 d  u( a5 ^& K; u    }
  }
" `* y- M% r9 e8 R. u};
</script>
. v7 e: v! o( j4 y5 v
0 f3 ]1 J  A- i4 A- D# I- V
. c- s; Z6 o& K
$ H6 C2 y; ]. e$ S* w& {2 y& R+ L