组件方式开发todolist

admin

$ q# L4 [/ {7 }" s4 ~/ g


<template>
* A- ?0 s* E. [2 b: g  <div id="App">
, L; d: I3 W4 F9 ~* T/ I! y$ c- L    <input v-model="inputValue" />
+ A& S) A9 C7 k" Q7 |    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
# t; G7 Y) g# q3 e, X. D        :key="index"
        :content="item"
( @; s" D5 W9 Q7 M        :index="index"
* @) M# U; e7 [& C. L+ Q        @delete="handleDelete"
4 B( Y1 o7 @2 J      ></todoItem>
) n; |9 c5 ^( s* D1 d6 x    </ul>
# h9 Y$ U1 t% k6 p3 O" \  </div>
</template>

<script>
import todoItem from "@/components/item.vue";

9 H4 R  @0 Q. u" `8 o+ T# Sexport default {
  data: function() {
+ \: w+ P# z! y. d    return {
      List: [],
      inputValue: ""
/ Q2 {7 f" ^, |+ \) |' V& M/ H9 B    };
8 c" P9 U- V; C: Y9 g, N1 f( M  },
  components: {
2 E" ^5 A8 c7 ?6 n4 u    todoItem
  },
  methods: {
    submit: function() {
( O; K* Y8 C6 l" z7 t6 J      if (this.inputValue != "") {
        this.List.push(this.inputValue);
, w, t+ x: k' S, l; U; }6 z4 M  w% d      }
9 y/ M' t" w" x      this.inputValue = "";
) E' G& e2 Z# q1 ], v) ~- z    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
6 L+ i2 D" ~& P( t2 T  }
};
</script>
1 J! U$ P8 Y: n- T. f; o, S
2 W% M! s" b+ M% [

# W; e) l9 U# W' Y+ [
2 D, _3 Z. q1 U: u2 @
0 u0 g* H2 U4 u& e) A; ~$ ]. O# w

: V1 B0 t4 C& B& X  ]7 I  L. L<template>
  <li @click="deleteItem">{{content}}</li>
</template>
. M0 ?8 U" m) a" Y$ w7 q
; M, Z- g4 I! A+ ]# `' ^<script>
- U1 l) u* M# `9 hexport default {
5 x# Q- {- n0 X) h  props: ["content", "index"],
6 @# n, S0 T+ F: Y. `5 ~0 l  data: function() {
' `( T4 G4 u# o    return {};
  },
& Y5 |, _4 ^7 T' b. f  methods: {
. |+ i& S0 |# j. f" [/ [6 P    deleteItem: function() {
      this.$emit("delete", this.index);
* p6 Q$ l9 c+ ~4 m! K" K    }
  }
( a: j* l9 J$ F- }$ c};
</script>
+ n$ u! k! Y" U


2 J. s( x. q" f. ?; V( ]
) O: w; U: p! E* _4 P7 t1 l' j