组件方式开发todolist

admin

7 A; {9 m% ~  W. N6 a5 j' {3 N7 V; u
* i# ~8 j( z: V0 o. _  R
. V' |1 ^9 b8 u; k0 s7 i
<template>
  <div id="App">
    <input v-model="inputValue" />
9 g  ?/ u9 `/ I    <button @click="submit">Submit</button>
) i& R! ^3 X; t8 [# J# C: Y$ ~% Q    <ul>
; @& k+ U) M  Z8 h* c6 X      <todoItem
: m6 I! a$ d% @& N' m1 g  g; V        v-for="(item,index) in List"
/ w( q% p8 W0 i: C8 x        :key="index"
" c6 y5 G  s$ G  S        :content="item"
/ x* D2 u2 i- [% Z$ H6 O$ `/ Y' o4 b        :index="index"
3 V8 k0 [! |  U' s, n        @delete="handleDelete"
      ></todoItem>
    </ul>
" u7 Y; M  d2 X2 B6 {  </div>
! D5 ]6 ]4 ^( |  A$ @, R</template>
6 ?  F0 y: M9 a" Q; x. F7 f% f/ e4 x5 U
2 {1 g/ B; D- m- y% y8 e$ e<script>
import todoItem from "@/components/item.vue";
5 W9 P  D* g$ b9 i2 E
- H' b' {  X0 O5 Jexport default {
7 _- O5 i& T7 N2 K  p  data: function() {
5 E( b% N! Q3 ?    return {
      List: [],
      inputValue: ""
4 T; W0 `$ `& O9 Z0 ^! E    };
  },
  components: {
    todoItem
' \7 A; `, m- s- Y7 N0 @/ U6 W. \3 s  },
  methods: {
$ B: Z0 B0 Q$ z1 L+ _& ]    submit: function() {
( P: D' B% [3 G      if (this.inputValue != "") {
  i( u% @  N+ L9 b% z        this.List.push(this.inputValue);
! i6 P! ]" m+ b, J      }
  `/ j, Q( w' I) a' S      this.inputValue = "";
7 a. O0 e8 L  f6 G    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
( b! C, Q# i0 e+ g};
</script>

2 @- Z8 u% S4 N$ m+ f6 O# }' d1 j1 c% W

6 t3 C6 ], i2 H7 q% \$ V2 F


+ l0 K) q) h: t1 y3 |- H
<template>
! Q! }5 q, H- ^$ x* i  <li @click="deleteItem">{{content}}</li>
</template>
( Q3 i$ [  W: u: U
<script>
9 {- _/ d: X# L7 J2 rexport default {
" Q; B9 @* l& r/ @: J- L  ~( ?- Z  props: ["content", "index"],
  data: function() {
    return {};
/ |" a$ z8 d" C3 m, g7 @& c0 Y2 L" D  },
' [7 N/ p% v1 K' q. L1 M8 N2 f  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
: l5 K9 M4 k+ z2 G7 n' S8 Z    }
1 O" |7 Y; u  n* G- a  }
};
</script>
& X* P' C3 b( G
5 [: v+ u" }4 Y5 s% q: D
' `* Y4 z8 \" Z' T+ T3 }