组件方式开发todolist

admin

( J$ n: ^. ^2 r( K/ B6 \, q: F9 L

% V1 g% o( d# s% y# p, c<template>
  <div id="App">
7 p+ P0 l: Q7 S, t0 f) _' w4 a* t    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
* @) k2 M' y( Q) c        v-for="(item,index) in List"
        :key="index"
/ W) D; W9 R/ i4 U6 m        :content="item"
. B6 \8 S  P  j5 v+ f9 ?+ J- ^( Q        :index="index"
: ?6 O; Q5 c; l+ \        @delete="handleDelete"
, m2 s0 @2 o) K      ></todoItem>
8 F9 r; ~5 Z2 v4 n+ P0 {    </ul>
  </div>
</template>

# {& Z' N/ u+ a1 r  k- T<script>
8 g. T! |6 {' f, S6 z9 mimport todoItem from "@/components/item.vue";
& @, y$ t* G6 _9 ?# A. d7 `
( G( d3 f) K$ |/ i: b6 yexport default {
  data: function() {
    return {
3 J- f. H4 |0 n9 |' `      List: [],
0 Q/ o8 ]- `  ~* u9 k* N8 u! e      inputValue: ""
    };
4 P. h6 d1 Z1 f# f, D! _4 |  },
  components: {
    todoItem
9 a% p/ e  ^, E/ @) r' i4 [, t  },
" k" o2 [6 l/ |, W# |% ?, v  methods: {
    submit: function() {
) n1 Q; J. k1 r+ g      if (this.inputValue != "") {
        this.List.push(this.inputValue);
7 Z' a3 \! E; K$ p- \      }
9 v  ]$ S% o" }2 d; k      this.inputValue = "";
( l/ H8 G& h, ]/ C    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
5 i. ]0 d% f2 Z4 X2 _; w4 U1 J' s$ `</script>
  H: B$ W% \& l. x

6 l" v- K/ P. W% `" W8 L  d

* d; F6 D% N  {2 z8 w3 u0 x! L7 n+ V  f

% x+ |  O) i  ?" M
<template>
. D' P* s/ O+ j& l" R  <li @click="deleteItem">{{content}}</li>
' t: G9 |  t  S- b0 A2 \</template>
! }* b3 D. F! L4 \7 p( _" Y# }
+ m% ]  _& g3 f6 D9 C' H% y<script>
" q' J6 s/ D* C! j$ Vexport default {
! ~. o& z. F" L" s; B  props: ["content", "index"],
! m( E# V$ ?$ Q5 `- G+ a( M7 V  data: function() {
    return {};
' `/ V# b' c. o6 y) X  },
$ s' @. K8 b( f  methods: {
7 b: O: h2 M+ T4 q5 b7 W    deleteItem: function() {
3 O2 j: v" d% _, K  i      this.$emit("delete", this.index);
    }
9 P: g0 A0 K# W  J* p+ m0 ?5 L1 L  }
0 z: [  f6 T) f$ s! t% {};
</script>
8 n) b/ J8 N2 I0 T; [0 y; Q7 C' Q+ G
4 v0 W6 Y- p. z1 q2 z4 v0 k- R
7 C' {, r3 j. j- j6 a. {; @

9 S9 T' E  n1 q9 M& M' t* ~# B9 G3 P