组件方式开发todolist

admin

4 ?9 `2 R5 w0 i! ~: Y7 j, T
<template>
( \4 N6 O6 E. {$ g9 G4 o  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
1 _% B, ^3 m5 c& L5 v5 a; c: o, \    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
" d6 W7 m8 `9 ~$ o8 Y        :content="item"
7 U. k0 Z/ G3 ?4 x        :index="index"
. q$ Y) w# t; m# x" s# J( I. W7 b        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
) v8 c5 Q& k- o; Z( d</template>

<script>
import todoItem from "@/components/item.vue";
0 a) ^2 j6 j, \8 B0 L" W% n
) j" o& T! |( p' }( Oexport default {
  data: function() {
    return {
      List: [],
      inputValue: ""
# T6 Y! e5 n4 O3 s7 P1 q    };
# @+ G, h% d" K6 }( Z: j$ ~  },
0 k8 X/ \* T& S. k- u  components: {
- m4 d4 M' r+ x+ [    todoItem
+ n# F/ c+ ]. }# Q  e  },
0 ~! Z5 J9 L: z  methods: {
    submit: function() {
: a( P% q: f; u      if (this.inputValue != "") {
9 D5 {( l* E$ D# t- V        this.List.push(this.inputValue);
7 e4 s6 F' [8 a6 N, V' T7 L      }
      this.inputValue = "";
    },
, I! H8 u& S/ c+ u, B, Z6 t/ N0 v' J    handleDelete: function(index) {
; @: n, C& B/ _2 ]7 j. L$ B/ @      this.List.splice(index, 1);
    }
( R! \4 I. ^% j# ~$ ]; R" O  }
};
</script>




' u, k- |! ^/ o* g* f9 a
/ F+ B) ]; x- X$ s
$ x) P" g: _4 |% w* D# i
<template>
7 p- M% J- u7 a1 Y4 n  <li @click="deleteItem">{{content}}</li>
6 l  o, f, A7 u, u8 `" ?( |9 L</template>

# p; g+ t- R8 b0 P<script>
. p' |0 e; q" W8 o7 aexport default {
  props: ["content", "index"],
  data: function() {
; B3 s# ]7 G7 X8 [7 A* K. N, W    return {};
  R+ S/ b# T$ g. C8 G9 n/ W+ [  },
  methods: {
    deleteItem: function() {
1 k4 E, T5 M: Z& S      this.$emit("delete", this.index);
2 |. H, E) k# J. e6 @6 B9 h    }
, V/ [; S: W/ G# V! X9 W  }
};
</script>
" i- _1 h- B9 x
" z: ?* h* R# r8 P' n0 Z: A3 w( q

  e3 z) y( m- X1 E
& h/ A. d; W( q6 K! O