组件方式开发todolist

admin

1 ]* ~' g/ r! R' u; [  m
; V3 I5 a  G, F  F1 }

<template>
7 U. p2 |+ n1 [3 m4 X; T  <div id="App">
    <input v-model="inputValue" />
. {9 i. `) \7 L    <button @click="submit">Submit</button>
( z& ?  T" [' j$ I' g& n    <ul>
      <todoItem
        v-for="(item,index) in List"
4 p0 w! g2 g  V0 @' ?" z        :key="index"
, C6 v3 E+ k* ]- d- U1 t- _        :content="item"
        :index="index"
5 e7 W* O8 `7 I. u        @delete="handleDelete"
0 k; T2 r5 G8 q3 }) |+ T0 \      ></todoItem>
    </ul>
' s0 ]" b$ m! n3 O  </div>
</template>
* W! e& \) ?  k8 a- `0 A, O7 k
; ~# n6 H. D  w. o0 F! p<script>
import todoItem from "@/components/item.vue";
2 w+ q  ~5 K/ ]  k/ s7 V4 N6 S! ?
6 B0 t! T+ R( O) B. Dexport default {
  data: function() {
# n% M* J. _. t) _" L) ^    return {
7 j& D6 p( z. K6 z      List: [],
  N4 v! T$ m/ I( W( ^: a      inputValue: ""
    };
  },
  components: {
( A5 o/ i2 i+ Q! X9 g    todoItem
% h6 T+ q" e& i8 _: \) \: h  },
$ ~0 R9 K0 T, H  methods: {
    submit: function() {
+ j  a/ j& v# d4 @      if (this.inputValue != "") {
1 z/ w, e8 x/ x        this.List.push(this.inputValue);
' ]& J. o( R7 b) S3 ?, Y      }
* x* {* I- Z4 B, s9 N& T' ]8 C      this.inputValue = "";
    },
2 |7 t6 G$ e& S) x    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
1 m& ?  q! k- e# W7 Q  }
" h" @% E8 v9 x2 d1 H* n};
, N+ W3 @' n1 C- W# w! {$ m</script>
; H' U3 o# Y3 S* w+ [

9 ~, f( q% u! [" p

! h& o/ w! h7 I
  i3 k: v+ T# m) q! C$ h

<template>
  <li @click="deleteItem">{{content}}</li>
</template>
8 g! N7 W' v; |" ]5 N
+ ~1 E6 X0 }2 ]; s<script>
export default {
% ?: h6 w# H5 [+ w( Q! C  props: ["content", "index"],
4 F' v+ p1 t% f: g  data: function() {
8 E& S. Y, o. G& t    return {};
  },
  methods: {
" A6 r+ l' p# y6 V/ |7 P. ~( q& D4 B. z    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
/ s' j6 [' R, L0 Y( ~* e};
</script>
) T. t, q" J4 w4 X. ~/ o- q

2 h2 J9 ^8 d( W$ h& L# P
7 d1 E' o' i. y) G1 O$ T8 k! H. ~
0 N% `8 i( t2 c: r