组件方式开发todolist

admin

<template>
  <div id="App">
    <input v-model="inputValue" />
2 I/ r" f, u* T) P) _6 }6 _& c% v    <button @click="submit">Submit</button>
2 I. ~/ m5 J; n' P* |4 g- O' Z    <ul>
; `8 P$ `# E" a* k* ?; t+ P  H      <todoItem
8 N2 s% T. @: C; O! J4 n$ R" _        v-for="(item,index) in List"
% Z' e: E* Z( D3 T2 [, x        :key="index"
# u: |. P# u% C( F8 x7 ~1 p1 ^        :content="item"
: o# B5 L8 E1 V        :index="index"
2 Y% a6 X7 `! o3 f        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
</template>

8 C( i5 I; {2 G, b<script>
import todoItem from "@/components/item.vue";

( U& C3 s% u0 _# f; W& ^( Y& ~; uexport default {
2 Z, Y, j: K+ K. M$ p+ Z0 i  data: function() {
4 c, J; ]8 {. z# c+ E    return {
      List: [],
      inputValue: ""
    };
1 I: i! N  V  v/ B. o& u" M  },
  components: {
  X' X' q0 T% W" P' L    todoItem
  },
  methods: {
/ F1 \7 @8 c! V' w    submit: function() {
: Y5 ~, e+ @7 B7 V      if (this.inputValue != "") {
        this.List.push(this.inputValue);
+ X8 v! ?3 ?# U( E4 c+ x3 N      }
      this.inputValue = "";
    },
" S) r& o9 U2 Q2 X% h    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
. u! r( |) n0 p' a  }
};
$ f  h* p5 f( ]: F, B5 S! m</script>
* g3 l! a( W3 v* K) ~& p& g
% G1 t. Z5 @6 r( D# `8 R7 T; p6 Q" x' C
: m% s9 A" M2 [9 A: i5 v

' l; ?. S; T: _' W
7 Y+ B  Q0 O* i, T. E. u6 e
. u% D4 F6 }* v* E% ~  @
<template>
2 K3 c$ U; i0 {! j4 M! ~  <li @click="deleteItem">{{content}}</li>
% z* h( d: e4 j& d( ]. i</template>

<script>
; R! G1 g" U! Y2 D7 e2 wexport default {
  props: ["content", "index"],
  data: function() {
5 h, ?4 C' z/ U2 {" K/ j    return {};
  },
  methods: {
1 T$ a$ m, D+ J    deleteItem: function() {
+ @0 d( }5 q" z/ X" ^, w      this.$emit("delete", this.index);
    }
  }
};
</script>
6 i6 Z5 D" w& P


2 y: I. F+ A* F3 B$ L" P