组件方式开发todolist

admin

% z5 B+ j! Z$ x, \- J) E
9 }9 y' h, d, C- e9 M5 b  Y! a<template>
  <div id="App">
    <input v-model="inputValue" />
5 h- S% j% f7 x( ^& Y! |7 o    <button @click="submit">Submit</button>
4 }3 S8 q4 \2 `3 s3 I0 ?1 b! \' s    <ul>
+ F$ _$ u( h+ r8 @      <todoItem
        v-for="(item,index) in List"
        :key="index"
* k/ T7 _5 F. v$ N: R: a        :content="item"
        :index="index"
; s/ F* o! `' N  ^3 ~# ?/ m        @delete="handleDelete"
. t$ C- S7 z, W      ></todoItem>
    </ul>
4 C0 U1 x" z& Q$ {6 L9 Z  </div>
</template>
5 F/ i8 p; ?' {7 ^8 b# U8 }
0 q+ S  G: j3 A0 a0 M, u: G6 [( b<script>
# D. I# j$ A5 |8 w; z' f7 Pimport todoItem from "@/components/item.vue";

( a* x0 {) K) v  w% Aexport default {
/ S( q' s: r6 |  data: function() {
    return {
      List: [],
      inputValue: ""
    };
9 ^: w5 x# A8 c$ A; y3 d; t  },
) {: E/ z  K6 q, t# m3 `! U  components: {
    todoItem
* O7 g, K8 l3 z- q2 \' I$ R  },
, j" V* f; `0 a% S! Q6 U  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
- m5 c/ I' Q  _0 {( P8 b8 j: m    handleDelete: function(index) {
      this.List.splice(index, 1);
* e! b3 M/ o! D+ q+ i    }
  }
( t9 ~" E3 x. K1 A/ j) q! X};
</script>
; |; Z5 a3 R6 R( [) _


1 y2 l3 {2 k$ P  n+ Q8 \& N; h. f' V
1 C( W. p% U) `8 k+ L' `
; \9 B" F- _2 m( a8 D; s

<template>
  <li @click="deleteItem">{{content}}</li>
1 |  }1 L1 Y# S! P$ [</template>
4 A, }  ^' @5 p& L( s) i8 ?
% O  ^' O# K: s4 v/ T<script>
export default {
  props: ["content", "index"],
  data: function() {
    return {};
# m/ I# h8 E+ H  a" o  },
3 \. \) e6 {5 u3 a  W  methods: {
4 A( g) g" `* `& D    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
</script>

! q( C0 K% Z/ }( v" \
1 g  Y/ A. B+ ]$ M

7 D% f& h, ~. I