组件方式开发todolist

admin

0 e7 _9 ?$ \. O0 L2 n! q
& K6 x6 e3 M- t- M) ^7 y! K
  |" X+ z( T# X8 W: v7 o<template>
  <div id="App">
8 q& d9 U. c8 f  u* X3 {2 K' D! i    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
' P% W. e! V$ q7 l- [; R% g4 @7 @" y    <ul>
      <todoItem
/ @& _$ B: k0 e2 a+ X        v-for="(item,index) in List"
  x+ p1 v! w2 @7 A, Z% o5 c2 a; q        :key="index"
4 i) X) j9 @5 f" M9 ]* `. |4 M        :content="item"
        :index="index"
        @delete="handleDelete"
# M9 }  w7 M. R- ]" L      ></todoItem>
    </ul>
  </div>
</template>

  [, R* X+ e" h. M) L<script>
7 t* |: Q" B  |% h. Aimport todoItem from "@/components/item.vue";

export default {
8 w( V) w/ |1 t  data: function() {
    return {
& R7 P- N# ^$ a0 E: N; i: _      List: [],
      inputValue: ""
    };
  },
/ w- m+ |' E3 i  B6 F0 X4 ?  components: {
3 ~/ k' q) E& R7 Y/ D" m. r    todoItem
  },
0 H1 F; D5 `$ U% M  v$ S  methods: {
6 x+ E% G3 f+ w9 m    submit: function() {
      if (this.inputValue != "") {
5 R7 r4 J0 @9 w5 d: h  B8 e" L- e        this.List.push(this.inputValue);
0 l1 {, M8 W7 ]      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
6 X. }0 l: G- @1 I! G+ @% x      this.List.splice(index, 1);
    }
  }
  v, R, b6 d2 P+ U- F' b};
' @1 r# f5 o* b' [</script>
. U) x0 b' [5 S3 s+ E( ~% x# F* a
" B' Q* E, H" H/ H
3 Z; t6 l) c2 b* q/ w
' [0 V$ c8 A9 j+ G" r
( [; g: a8 h: U, B8 H


9 ^/ t" W) u' P# [, [; M- v<template>
6 f2 B& j& x' B  <li @click="deleteItem">{{content}}</li>
</template>
% f4 V4 f4 U/ d# _  k8 W
<script>
2 J; W0 u+ y: _/ Dexport default {
  props: ["content", "index"],
, a7 J3 }0 O7 w, k8 z  data: function() {
, P- q, r& L- [    return {};
& l) f; Q- {/ l8 T( n  },
; u% e/ `8 B0 I( s  methods: {
    deleteItem: function() {
9 k( ?7 W9 n2 @      this.$emit("delete", this.index);
: r9 c4 e9 X& d- A    }
# ^9 C6 N! s2 R+ ^" x3 w' Q5 o4 M  }
, ]1 s7 k$ o2 j2 N( m# m& z" a};
6 Z" N7 ]  {- \% f1 n</script>
2 K. F8 [5 w. {9 r
1 [* f# `0 j1 l, X+ @
' M( N: P/ h- _

$ s4 q0 R9 @6 ]: }3 G) F