组件方式开发todolist

admin

* j/ F  r, ]2 o( E

; v2 \, F0 v# R8 k9 h
<template>
  <div id="App">
    <input v-model="inputValue" />
- C4 w2 u( B% x6 j3 w$ ]/ q    <button @click="submit">Submit</button>
5 T8 O9 X+ `4 ^$ H7 v" W- z/ C2 Z    <ul>
- H5 j; r6 ?  |) G) r$ I" h" u      <todoItem
6 }% ^# V) J( c% U        v-for="(item,index) in List"
2 J1 L; @' V' V0 t$ n        :key="index"
" y+ C! l! |; ^6 X        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
, m# {3 {! O/ Q  </div>
</template>

<script>
4 Y5 y2 @& y! a( T7 l3 F  Nimport todoItem from "@/components/item.vue";
! ^0 }, T# [  w; m; Q' s
3 }* G# f8 h+ |/ t/ |$ e+ A  Xexport default {
( I5 H* Z9 I3 q% k" O  data: function() {
+ r  ?7 ]) f# }2 I; \  s, ]    return {
$ y# T3 i  ]' N- D7 e; P      List: [],
      inputValue: ""
    };
  },
2 k( j# \- y: m6 m- k; V  components: {
5 A8 x+ C4 C9 o8 k$ w% m    todoItem
' Y2 c& e; F7 W* ~4 W& n# L  },
  methods: {
* m7 K- ]+ O, x! G- Z1 t/ I    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
% Z% S; n* W9 i- B8 `) H) [      this.inputValue = "";
3 U8 G! [" y; T    },
+ L/ y0 R6 v! D    handleDelete: function(index) {
2 z2 N0 \0 D8 d7 g9 s      this.List.splice(index, 1);
    }
' F3 J7 B$ a/ a* V3 P# M  }
};
</script>
( \. u% K: ^# }9 @9 u& M8 J


/ o7 c" U2 \; O# ^, h5 O. @

) T3 Q5 e: q- L. T
' N) ~' f" b+ [7 O; v
<template>
) ?* j% o9 j4 \' `  <li @click="deleteItem">{{content}}</li>
) I( @; y3 B4 ]* a</template>
+ o$ L/ \6 x. O8 A/ M! N
  O+ \( n3 l7 ^! J, o0 f<script>
export default {
8 V" m* b+ K6 y. A" v4 C  props: ["content", "index"],
/ S. n& T7 p& t/ k  data: function() {
, I3 B7 N) Y( E# t' h$ o4 F2 u    return {};
  },
  methods: {
    deleteItem: function() {
6 ~" T9 S1 n( T1 X# o0 d      this.$emit("delete", this.index);
( D9 G1 L5 n3 E3 A2 o8 I9 p0 a    }
7 a; G* Y+ J7 n9 n  }
};
& D: h& v4 B4 C) @</script>
( f8 g2 x3 ?7 |
& v( u5 u5 E3 r/ |  K
6 I7 J, c. h& x/ H% D8 e$ k5 J