组件方式开发todolist

admin

0 C$ P, Y, {% Y1 Q; n
8 P& o9 m# P" i% c0 r. M0 n
<template>
- ]3 r4 n6 X/ |3 t5 [  h1 m  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
8 X9 s8 Q/ q% T+ [+ W    <ul>
/ d+ I+ [, Y% j2 @" c      <todoItem
        v-for="(item,index) in List"
        :key="index"
2 d, q- h6 {) a9 H+ d- ~% b        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
$ y& g: j9 l- {" x8 `$ n+ W# Q  </div>
0 m& {* d; V0 B1 X# ?9 @9 d</template>

) X1 ?) U& E8 m4 w<script>
import todoItem from "@/components/item.vue";
6 m  s+ M4 \8 m  P
export default {
  data: function() {
    return {
) C9 m* i/ D" G7 }! ], g      List: [],
      inputValue: ""
- ~# `5 ]) |  [. C  F    };
  },
+ M' `2 P0 G& O8 M0 {5 s, h, k  components: {
% X! h% _& B7 A- e    todoItem
  },
( m2 O9 }6 w, d# q- v4 W) ]  methods: {
    submit: function() {
  k* |5 O" S$ p: ]- T      if (this.inputValue != "") {
; {7 T- {3 k  x) t( i        this.List.push(this.inputValue);
      }
3 f4 _4 U+ C; k3 Q; @      this.inputValue = "";
    },
; f6 A, ?  l- T. U# @    handleDelete: function(index) {
6 F- y" h& q2 L* z% Z( @      this.List.splice(index, 1);
. M7 q' c8 C5 G    }
  }
2 \! x! ?5 [% ^+ ?0 A! p* D+ J- `};
</script>


; e1 d! Q  Z) m) d1 z! z
" _4 m0 V% e: w. E6 \
3 Y( J/ h( N/ w6 D7 K2 x
9 S6 \% u- G+ V4 |: g  V7 a

<template>
  <li @click="deleteItem">{{content}}</li>
</template>
- x& E: w& u+ A' A/ a8 n/ Z
# Z- ?: ]. _( j3 F' Q! u4 y: m9 H<script>
& I3 G4 F( T4 Z  B9 p" M0 Eexport default {
% f$ E) Q5 K4 o  props: ["content", "index"],
  data: function() {
2 H1 G+ {. U. ^8 X    return {};
* |$ O. H% G0 v% R  },
( \4 {6 r. L4 W* F+ {+ N# n" ?  methods: {
    deleteItem: function() {
' H/ M( _8 p5 _' A$ O      this.$emit("delete", this.index);
6 o5 B# X+ l# O6 _0 A$ S) Z    }
& h- v9 ]4 |$ \( |  }
" I* @2 y6 b7 _3 R5 Q};
</script>


# }5 G) b6 s2 o6 O2 U3 b5 V
5 \' g8 D; b. \. e' ]/ r; K