组件方式开发todolist

admin

6 L5 {3 C, a  x<template>
3 U) q  r3 r' Z( J! `  W  <div id="App">
% G5 o2 K5 \" K    <input v-model="inputValue" />
0 R1 V+ y/ A. \+ G& b7 S' U    <button @click="submit">Submit</button>
3 Q  p& ^7 Y: e. A+ c    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
. }- e2 K; z$ }; L        :index="index"
        @delete="handleDelete"
* G7 R9 U% r8 a: U* C: v; @  p      ></todoItem>
    </ul>
9 N# P0 P% }& q0 W6 a$ |! \  </div>
</template>

<script>
import todoItem from "@/components/item.vue";
8 O) E/ a, C( ~  F/ l  W# H
export default {
  data: function() {
    return {
      List: [],
      inputValue: ""
    };
  },
  components: {
6 a" l. o/ Y9 f/ _    todoItem
  },
3 x+ Q/ i* V+ t1 q  methods: {
/ _* h3 j- i9 Y2 g, a( P: L    submit: function() {
      if (this.inputValue != "") {
1 v4 u  [: j& K3 M& L' C: g        this.List.push(this.inputValue);
( p& C9 G5 d' M& @3 V/ s2 P      }
# I5 Z/ G  X) N5 Y7 c      this.inputValue = "";
    },
2 J$ B" H: P1 ^$ j. B0 t    handleDelete: function(index) {
      this.List.splice(index, 1);
% V6 [2 ^3 H" t  |$ c# l# e    }
  }
  q  ]3 F1 w( ~2 U& Q' L* U};
</script>

7 r' s% g! p& V) s# `6 K% G
; k2 N! J; N; G1 |8 F
; D" @% J2 H# o% }* {1 K+ W



<template>
- a1 Y" z2 V  v$ a$ v  <li @click="deleteItem">{{content}}</li>
* e6 B+ p, p; e& |</template>

) m5 {) M) U5 L6 }& E) [<script>
export default {
- ]) G- A# h- u$ d7 C( Y) z1 V5 ^  props: ["content", "index"],
  data: function() {
+ C7 g, K6 ^5 C' u    return {};
: ?4 C3 K$ b+ G, C6 A" d5 e( u  },
' X' _5 e# J: a" ]( U  methods: {
1 h0 O% @5 k/ p" a; `* L* P    deleteItem: function() {
/ C/ G& i) i" q; v4 n& w- M+ X3 h      this.$emit("delete", this.index);
# s- N6 S3 D3 I) R' P5 k    }
  }
+ m- d6 S5 [9 _};
</script>
$ \2 w1 f- M' k0 V


4 _- n+ v$ n  i9 }  y2 x! n