组件方式开发todolist

admin

1 Z* ~# i( e# _

5 u5 S$ ?# Z: L, e/ Y<template>
( L: Y( P* j( W  <div id="App">
6 H& f! V, W! U6 N# |9 @1 x% l- E    <input v-model="inputValue" />
7 o: r7 q# v& ~- u7 |    <button @click="submit">Submit</button>
6 }& q5 `2 A, Y! C' G    <ul>
      <todoItem
/ J  _/ F% X& g1 C        v-for="(item,index) in List"
& {% z( g% I, g% H        :key="index"
        :content="item"
        :index="index"
  r/ O+ C% @6 ?, d        @delete="handleDelete"
$ |. U  O* T; d# m      ></todoItem>
+ x7 J3 o7 ], W    </ul>
* v, S/ U5 ^/ G( x  </div>
</template>

  S, J9 Q6 U; a<script>
+ }( T; A/ H- C0 O* X# ~3 Cimport todoItem from "@/components/item.vue";

export default {
  data: function() {
9 i6 x) u% f7 n    return {
  E1 S  y6 ?- N; E! \      List: [],
      inputValue: ""
6 M; j- \' t- l/ M+ p    };
( U% O9 r, G5 n  A8 Q' W3 d9 J  },
. P7 }# N4 N- [1 [4 }7 F  components: {
/ ]! t) s- H- A1 `- h& s    todoItem
8 V: q) P7 E$ _3 B$ r+ b  },
  methods: {
    submit: function() {
9 r0 p: n9 O: X5 e      if (this.inputValue != "") {
& @8 b8 p" x0 I" l4 S9 n        this.List.push(this.inputValue);
      }
- S6 G3 L3 @$ e; y4 T0 N7 _      this.inputValue = "";
    },
    handleDelete: function(index) {
& Q& b  ]$ q# |! \      this.List.splice(index, 1);
    }
  }
3 {4 V" s! F/ r$ c9 n};
</script>
# G% z  ^& ]. H: G
3 L8 w  h# J0 ~: v9 }$ z' ^



; e& b3 \% Q& A5 [  l0 a9 `
3 n  L) X* B2 H3 c
<template>
  <li @click="deleteItem">{{content}}</li>
0 U, V- U0 I# p5 w+ N# H6 a7 Z+ H: i</template>
: E& w# a/ c0 m8 o0 ~
" a/ q% Y3 T3 d, i/ }<script>
export default {
  props: ["content", "index"],
7 W+ n" X4 H$ F4 {2 X  T  data: function() {
! f, a! W" ~3 Q3 [$ u    return {};
  },
( @- R8 ~/ |' @  methods: {
7 _: x% l9 `  W( P: T    deleteItem: function() {
# c6 h$ \6 H% }, s, ^* r      this.$emit("delete", this.index);
( ]( M' z2 D" i$ ?; B    }
7 t+ }% y; T$ }- u4 X( l: T  }
};
% E- E) r' T. L</script>
. r: F  r5 V, P; c
1 F6 B; g2 P' f7 O& n+ p

; q* e2 A% ]# }  q% P5 y- T; M