组件方式开发todolist

admin

; J6 s/ d: C" V. L: _
# U& z- c2 j  B9 {1 f7 j2 L& d9 N! w<template>
% j) d9 U) h# V* ~; O' U, f  <div id="App">
1 h6 a, F% ?( D( l/ y8 G# s2 j7 b9 W    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
1 b) C) [4 }) o4 h- ^, Z    <ul>
      <todoItem
        v-for="(item,index) in List"
' J" y0 v) D: I2 r' t5 [4 H        :key="index"
, W# Q. [; Y$ K: v, X5 C5 Z: a  [! V        :content="item"
2 s9 c, x  T: }        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
</template>

<script>
import todoItem from "@/components/item.vue";

export default {
1 N7 J6 u5 i. Z; \: d* ^  data: function() {
    return {
      List: [],
; @  l( r! s5 a! C4 D      inputValue: ""
; [& \# u2 A  u/ F- t    };
  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
9 }  S! N! o% R+ V: i8 {        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
( B) o- z- n0 b+ s( M8 F    handleDelete: function(index) {
2 z: L$ ]$ v2 n      this.List.splice(index, 1);
& ~$ \+ f1 |, A    }
  }
};
</script>
8 `& [2 b3 u3 s7 E: r3 }



0 ~! L5 o2 q/ b0 k# G
5 r1 N; z/ z& q4 |: y
% |' H+ W4 L5 |3 z4 I* s
<template>
+ Z: ^8 w/ X6 p' e* d) g  <li @click="deleteItem">{{content}}</li>
</template>

# K* C6 b, [: D- W2 X$ `<script>
% \8 t- V3 G, pexport default {
& }5 {. D: V" M( B% M% g  props: ["content", "index"],
  data: function() {
    return {};
: h( F0 _5 Q* `* P+ O3 `+ r+ h% j; b  },
3 f% e5 P, ~- t4 j  methods: {
% N; Q! u  u& A- \( F    deleteItem: function() {
      this.$emit("delete", this.index);
/ ~" e& ?8 A! H* l; Q! \( A    }
/ Q, B* Z) r. V1 `, E  }
. P2 C- n* {3 ]3 g8 X; N6 o};
</script>
: }+ o8 K' R+ `- Z8 g1 U5 S


! R8 C, v/ i; g( Z0 e+ O2 L/ V+ }