组件方式开发todolist

admin

; |4 R, C! Y4 S7 O- u. P4 f9 p
- c! F0 n& P" Z& _) O9 o
" ?9 m7 Z2 r* w" T& s2 F; r/ b' C
6 J4 l  w$ J4 [/ B7 i( [<template>
+ l8 w' y) [% `) Z" E  <div id="App">
& K. A: C, X5 @  L  |    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
2 B8 h& g% g$ s( i0 C      <todoItem
* m2 C5 W2 g! _# S2 s$ y        v-for="(item,index) in List"
* p1 \" Q" r: B$ K$ [        :key="index"
        :content="item"
( [' z8 n. P1 a9 A  T+ ?        :index="index"
        @delete="handleDelete"
      ></todoItem>
4 C3 l" O# y9 s+ R& [9 V    </ul>
  </div>
</template>
# p8 f! S4 X! h3 A
<script>
: F3 s; D9 l; {) Himport todoItem from "@/components/item.vue";

export default {
* e' \5 n% G( `- P; v# j  data: function() {
    return {
) l4 X6 A9 s4 `  K' @; a      List: [],
      inputValue: ""
, o2 U5 K& I( [    };
/ Q$ m7 W3 N1 q# J# g0 b  },
' g, P+ w0 B2 L# L4 y+ H: R' [  components: {
7 T4 N" \, Z  H% I. Z6 |2 j; G% u    todoItem
  },
  methods: {
( ^# t% @) F$ y8 J8 J! Y    submit: function() {
) K; X  c6 u/ h0 v      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
0 @; x2 s0 P* }2 `# [$ ?& I    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
0 A+ O) F( d9 H& \};
$ Y0 A3 n- v2 X1 }2 U</script>


5 m' C% Y# x0 D5 p# d2 G0 \! D

( ~6 T# C% ~& `

* |7 ^4 Q  O* g" O$ G) b
<template>
) O7 }# v& ~4 o0 M  <li @click="deleteItem">{{content}}</li>
- ]1 s% W' r& K) S2 Z3 b</template>
% d. H* r, V" g' u) p- ?: m
+ I8 ~# i% s% |, t+ u" w<script>
export default {
1 I! d/ x1 |5 _1 N( N* N; S  props: ["content", "index"],
3 R/ O& @$ `4 Y8 v7 v9 w6 T7 w  data: function() {
+ a2 _9 n) L$ r4 _; [& w( ?    return {};
  },
0 j; i) S  X+ b! e. ~- _  methods: {
+ E  x7 h3 V3 z    deleteItem: function() {
! V5 B/ r$ R% A# T9 j      this.$emit("delete", this.index);
    }
  }
1 i2 S) X) R! m4 O# s};
  d2 v5 ^- _; G$ x. B8 s% S</script>
3 C, o) d* N: ?1 j; l9 y
3 d/ E( U0 b; @$ X& _) \$ R* O) ~
. s$ |! b  N5 E( h& i4 l) H
$ h4 c) ]2 t6 }  b
+ X2 l- C  {0 v7 o/ o9 p! M