组件方式开发todolist

admin

5 ~* w5 }6 G8 Y' p; M; R( E* a) |<template>
$ R+ |: V+ X# G) W9 F, C  <div id="App">
3 E2 S1 z) a' z- ?    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
) B! O+ }0 F- J/ c" Z" I! X    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
9 y! m* g, L' s, p" |        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
5 G9 Q4 \0 I) i* Q; n</template>
2 H% J' l& f, @% _* G" `% F
9 v+ e) Y' f$ l7 K- ~- q; o) K9 ]+ i<script>
import todoItem from "@/components/item.vue";
9 j$ ^; C" w* m6 y
export default {
  data: function() {
    return {
      List: [],
- ^! |3 {( t" i5 A      inputValue: ""
    };
  },
* N0 |) {* y! o7 T. f& Q  components: {
    todoItem
+ R7 i$ R7 Y* o" [  },
  methods: {
: w0 m) t) Y% E2 r9 E# g& F$ [    submit: function() {
      if (this.inputValue != "") {
. W& g8 ?1 t5 ~  M5 I: m8 e        this.List.push(this.inputValue);
      }
0 y, [6 H% L( p8 @, |( E: r$ v      this.inputValue = "";
) M5 t: \  }* [( n6 {' y    },
3 u6 p, f2 I: M! ^    handleDelete: function(index) {
3 V$ t! X0 z. _- b2 v      this.List.splice(index, 1);
    }
  }
};
$ }5 X! d/ }$ g' }6 z8 M" t</script>


+ n4 U' K7 W8 ?% R0 n7 F+ S




<template>
  <li @click="deleteItem">{{content}}</li>
$ N8 T1 _$ l7 j) B$ W</template>

<script>
export default {
3 I* [2 m/ @% p7 h" s  props: ["content", "index"],
  data: function() {
4 R) N. [; i8 X' S% x    return {};
; \6 _: q+ |) {, m  },
  methods: {
    deleteItem: function() {
7 ^* k4 U5 j5 r$ h" z& @      this.$emit("delete", this.index);
    }
  }
9 D3 e' T, M; ?! H' ?};
</script>
; a8 j' a; c4 \) G: k: |
" A% L0 U# ^/ T: R
. ]7 K+ R$ t/ ~9 V: A! Z& Z6 B
$ z0 ~" R6 n+ V7 K8 Q