组件方式开发todolist

admin

7 E% J# b+ Z, u# @8 X8 x3 e- S

* E  e2 F9 @" R' S7 Q- n' A
<template>
8 i# _- W( d" s8 q5 d8 ^  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
: t& v) S  C8 J    <ul>
      <todoItem
$ J0 z  x2 F" k- X; _" `* x8 g        v-for="(item,index) in List"
        :key="index"
        :content="item"
: Q  D& G. M( F( a, C        :index="index"
        @delete="handleDelete"
* `0 }5 ~. v! D2 I' y, y      ></todoItem>
    </ul>
* d7 N" o$ T7 J& v6 h1 s* H  </div>
# E! ?2 C' b! n; a# Z</template>

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

export default {
3 ]$ w; y: n" O# P  S' d, T" m  data: function() {
7 M8 G. W9 y% n. E    return {
* D9 [3 i1 \$ U, M! }      List: [],
9 e, {: L) \9 I* N      inputValue: ""
    };
- M7 m( |, `# P0 K1 c& D1 k  },
0 z. W6 y. D/ a6 D5 |" V  components: {
    todoItem
' y3 w4 |0 g/ m5 |2 k  },
% R7 o+ g$ ~5 g  I7 c. V# n  methods: {
, T+ ]6 V: b  a& R; ~# |. S    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
2 E& P7 x0 r  I  N! x+ j0 X  O      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
* r, f9 H  w6 u$ x    }
  }
};
0 E# P  X6 x- R9 \</script>
$ Q6 P- c1 X2 y: Q; l- S/ W7 n1 w% j

6 Q* e+ e5 I- Q4 C. o2 P
( M2 M4 G$ q) {  T# Y6 b1 c
* r" Z+ H" Y: M+ l6 C

6 h) w9 B9 j; K5 R4 R0 l' q
0 f2 _6 M7 N& ?% f6 G" K' p<template>
& d; g/ F, y5 j/ O. `( o7 d: V/ x8 q  <li @click="deleteItem">{{content}}</li>
</template>
' S& l* o, L; Y
<script>
export default {
  props: ["content", "index"],
. i- b% Z# O1 U* }# U  data: function() {
    return {};
  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
1 i2 j" Y- v( `# }. ~  }
3 i6 y" q( |' V$ d9 U6 K6 @};
</script>


# w# r$ I: W  K/ [) _! K
/ q, Z. O% S; s4 ^% ^( u: @8 Y" W
  p' ~2 A4 j+ Z2 K7 [