组件方式开发todolist

admin

& X) C) U( l5 X! ^* W7 H<template>
  <div id="App">
    <input v-model="inputValue" />
7 O0 |: l5 Q+ ]2 ]! p% I  I    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
1 g$ P2 h: A8 G, T8 e' c5 q# P$ I        :key="index"
- N# |3 o. l! f: [4 k/ E5 i        :content="item"
        :index="index"
6 i5 Q: H* ?/ r! H+ L: @1 s        @delete="handleDelete"
- @/ Q: l, A+ E4 B      ></todoItem>
    </ul>
; P) H. q( z( c) h  </div>
</template>

0 j, f7 ~- [1 i2 D& U0 |0 `! u" Z5 A<script>
import todoItem from "@/components/item.vue";
6 R5 [  J; {9 m; p) P- S4 r
: V: D: V8 g" S5 h9 I: Oexport default {
  data: function() {
7 L! S- T. }- Z    return {
      List: [],
      inputValue: ""
8 R5 z: e: o! {, k# k    };
  },
+ s8 m) y: J/ n, \  components: {
7 ^4 C: E+ H2 k$ [) z3 F! b: |    todoItem
/ t6 Q$ c) h5 e& h  },
  methods: {
    submit: function() {
* v1 Y* D* L3 w$ ]      if (this.inputValue != "") {
8 x3 U, C( [2 j5 G0 G% S        this.List.push(this.inputValue);
7 V  e& Y& T. q$ J. J! W. s      }
      this.inputValue = "";
9 ?% m6 U0 P# M/ G8 c3 e; y: P    },
    handleDelete: function(index) {
" J7 ]1 ]8 g) Q+ A% b7 ^# J1 Z      this.List.splice(index, 1);
    }
  }
# {2 F7 c" d! Y3 L' u8 ^};
" G. `$ F9 a. z: x</script>

: S8 R0 Z% d2 G  V


4 ?- C6 c9 Z( T7 h( P7 d
( z2 U. k! r1 U. b1 T% s

( N6 A- n& g: C! ~. d0 H/ i- C<template>
* F5 }) N0 G$ A! R. {9 F4 t  <li @click="deleteItem">{{content}}</li>
2 N# R% s1 t5 X% Y$ M</template>
3 d  U$ u* V& T6 U
/ b5 j7 y6 P5 {3 Y" w: l8 k1 e" b; |, `<script>
export default {
  props: ["content", "index"],
# Z  s$ `4 `9 o5 ~7 ^  data: function() {
) s3 ?: y* h9 }; M5 w    return {};
$ C7 w9 P8 S2 {% `8 r4 V  b" o  s  },
2 }' a4 Q* ~: c: _$ |0 J  methods: {
    deleteItem: function() {
" F& c' d' J1 [& t0 G) T$ W# V8 G+ |, X# B      this.$emit("delete", this.index);
, o2 i# j7 H/ e) u' `9 Y) {7 w    }
5 J$ C7 g8 x% H  }
0 }* S6 k/ D4 \' f- Y/ a};
  t. f: v* A4 o% v$ ?2 J; d</script>




& U5 A3 V' D; M) _; x