组件方式开发todolist

admin

* ^, D% A5 I, t. ?, [

! {" ~1 t0 B+ |<template>
  <div id="App">
1 o: E( f  u, W    <input v-model="inputValue" />
3 }6 C- g  S0 W' M  @! S$ i    <button @click="submit">Submit</button>
. e4 S: N* r) g" t: U, i    <ul>
      <todoItem
- t) `* W4 ^' W/ q. T' b        v-for="(item,index) in List"
) o0 e0 [6 @5 G( U1 E3 E7 x        :key="index"
        :content="item"
; X7 d& Q; e( X3 P        :index="index"
! N- h0 o* i, y, Z6 D; ~        @delete="handleDelete"
      ></todoItem>
! @# `) a/ ~* C  O3 ]& _    </ul>
  </div>
. C# `, l  F& f7 d# _: X</template>

<script>
import todoItem from "@/components/item.vue";
; W) @4 {4 i" ^. j4 F+ M
export default {
  data: function() {
    return {
      List: [],
      inputValue: ""
, r" K% K+ V" v7 F9 A    };
  },
4 m$ V, Z, g2 J* E7 w( \- R  components: {
3 k7 o! x0 j6 Z2 u  I: c    todoItem
8 `/ ]0 n" W3 |6 L1 k  },
) q. u% J. I9 o6 h$ K$ x  methods: {
    submit: function() {
3 ~- u* D' S2 a( O& a      if (this.inputValue != "") {
, ]$ x" C4 r/ W* l        this.List.push(this.inputValue);
' F. C9 d4 i4 j" p3 z" v) o      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
/ `3 H" `* W8 y$ f5 w( ~; y$ ]      this.List.splice(index, 1);
    }
9 G6 {' `+ R+ u+ d! t- q% D  }
( O# C- N4 G/ ?; h1 Q- m};
1 {9 q) Y9 y: C+ ~3 P+ I</script>


: M& W5 {3 a. J. c7 j- V6 }

5 k  s; y+ N6 b4 X  L, w

: j7 v9 v6 q, k/ w- y
5 H- W: _7 p0 u  k# z$ b<template>
/ ^  z0 }0 W$ D5 S  <li @click="deleteItem">{{content}}</li>
4 F: B! d, N" [' ^</template>

0 T# w* {/ X9 Y2 Z, A) }9 U<script>
export default {
0 S" e; Y" ?5 G" H0 v4 `  r6 c% x; P  props: ["content", "index"],
0 t: n( m0 L: ~) E  r  data: function() {
0 c' a: V" S- u2 h7 s, i: g    return {};
  },
  methods: {
; z5 ~' K/ U" N! k0 L/ q/ v0 n0 _    deleteItem: function() {
      this.$emit("delete", this.index);
6 v' b  e: b+ Z9 Z9 x; h/ ?    }
1 _% t* t) r. p& W# c# i2 b  }
# Q2 Y) R: |+ ?* y};
</script>
9 ]$ e! f2 T& {- G  n


) |% M3 @2 |- G5 O6 k
7 G2 M% s% a, P: e