组件方式开发todolist

admin

  ~. N1 ~" V" l( m4 A* Q
<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
1 L+ H" h8 d  e/ E3 v) U% _      <todoItem
        v-for="(item,index) in List"
( J9 \  j. {' B$ g' p7 j        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
/ m7 o5 _! z7 C# S6 @1 K6 H: x6 ]      ></todoItem>
3 i5 S# s8 w& ?5 [/ X    </ul>
' @( F$ x8 r7 I2 ^, p- O  </div>
</template>

, f6 d/ ~( [6 H  q: m" x<script>
9 \! J9 p4 z# bimport todoItem from "@/components/item.vue";

4 E8 H* m7 v- Y; Iexport default {
  data: function() {
6 o7 `' H, s7 f    return {
+ ~- k: o  b, [0 E      List: [],
, u5 r& y/ e, F" r( q! h& L9 \      inputValue: ""
+ R+ {$ j- O% E; H5 y    };
* |4 S; a8 r/ S  },
  components: {
2 \- M8 s6 Q+ c# w5 o( N% o    todoItem
" ]9 z2 u- A, [  x2 u- k6 ^1 G7 F# U  },
  methods: {
6 E- U! X! a+ D, p9 m1 y    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
% b9 j/ {1 F, D7 P/ P. @" h  H      }
! N5 `" N' _1 ^6 ?% t% g2 C* `      this.inputValue = "";
  w$ c. f/ i- c1 c, ]    },
    handleDelete: function(index) {
# g& F. |& ?& T  {( e. d      this.List.splice(index, 1);
    }
! j+ t& M3 p% A- S: R  n' r  }
};
8 M: d( e; _% {# `( X' n* X" O</script>
: |0 e) F* D$ O, O- d+ b! }# S
$ F# w, K+ j) o9 u! r# D% O



1 i" s. |4 L& U4 O0 W2 \

* n1 w9 C' \/ U5 {% r& |<template>
  <li @click="deleteItem">{{content}}</li>
3 ], O+ |# E, Y</template>
9 R- w* u' `& B8 C
6 Y* g' ^9 |: @3 _$ b' u<script>
  X& v" z% [- ^  @export default {
4 S1 o' _4 c3 Y" X  props: ["content", "index"],
  data: function() {
    return {};
  },
  methods: {
6 Q9 [* S' M# o$ g. c+ n3 u9 L    deleteItem: function() {
! {+ Q9 l6 f4 Y3 J      this.$emit("delete", this.index);
7 {& |7 \5 D/ S5 a- }+ ~    }
% p/ K2 B4 `' j1 U* ^, a0 l  }
- e' V+ N) G, ]4 l2 F};
2 R. j8 b0 h# D/ V; N; B- H( G</script>
0 b. d8 k2 [9 Y# F) N6 }$ V" K- l

* p, m% k  z( Y6 d# }0 u% P