组件方式开发todolist

admin

& K0 b  Z8 I  A1 m5 X

; u0 P, ^, ?& p$ i
8 Q9 U% o( s- w<template>
' q( v' z5 U) q  <div id="App">
. W: C4 Y! j8 o7 t" N+ Q    <input v-model="inputValue" />
' h% S* L( J+ v  m- ]    <button @click="submit">Submit</button>
6 \( O4 }4 Y6 b    <ul>
      <todoItem
        v-for="(item,index) in List"
3 `7 P" g+ ]8 ^& j5 W$ q        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
* l( z  w5 r1 u      ></todoItem>
    </ul>
. H9 t  C% M7 Y" X3 T- ^* \+ P  </div>
: W5 i4 O' n4 `# w' O+ h</template>

$ j1 F. H# C/ q, a: j6 V3 W0 B<script>
$ }2 a- U3 \; q0 [0 }" V9 Kimport todoItem from "@/components/item.vue";

4 m2 n7 s) E( f1 B7 aexport default {
6 {; k* s1 ^6 ]. R  data: function() {
    return {
$ k) c% b0 \, H      List: [],
) ^! R  V  }0 f# ?) X% T      inputValue: ""
    };
5 }* _6 I' F3 P3 Z  },
  components: {
    todoItem
  },
  methods: {
/ q  [- F2 [7 g# I3 I& O" K- R    submit: function() {
5 u3 Q" w, O  ~3 r9 S  k! {      if (this.inputValue != "") {
; V2 Z& s5 Z% r0 B- `9 C        this.List.push(this.inputValue);
      }
. \0 `5 M$ `2 w6 w3 h) x& |      this.inputValue = "";
: P) P% t: L' f; f    },
    handleDelete: function(index) {
6 o/ a7 \2 w& |, c5 b: o      this.List.splice(index, 1);
6 r* X" M! i. N! }9 R+ g    }
  }
6 z8 v0 U- j: w* K% L};
</script>
, V4 L/ O2 k( _9 T7 r
8 L3 H! u/ ?0 t: ^, {4 {1 }
" Q9 P: z3 t' u0 l
7 t( ]! h( k  K


: V$ t: B  V! Q2 ]8 _8 Q! c1 }
<template>
  <li @click="deleteItem">{{content}}</li>
</template>
7 R2 R8 f% L7 W# \' [
<script>
export default {
1 Z0 d/ D1 V& r2 x3 D  props: ["content", "index"],
0 z# I6 s# P: b" A1 w" k/ a9 e  data: function() {
: m/ k5 ?( w/ a0 i    return {};
  },
1 g! _6 \1 L% A& o! D  g. Y: u  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
* c( \$ h6 C. ?/ E8 s9 h3 w6 y& y    }
  }
};
</script>
7 N! Z0 |$ x) ?- P# K0 u) y
* X; {" G, g) p5 ^6 R# g
% `/ T& w% F8 r$ _! P+ o
1 B; d0 A6 y" ^& o4 K: [
1 d% q/ @" u* e7 N9 l# ]9 n8 a