组件方式开发todolist

admin

2 u1 ~. T) C; ^# S# z  {
4 s0 {; `6 T) B: v0 ^8 b

9 U0 ^# K2 ~6 H6 d<template>
0 d$ z, r7 T) c4 J; `. M$ e  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
6 Q; U' D0 [; g3 B: K    <ul>
: b% l6 |; O" Y3 E      <todoItem
! l- o; a; j' P& Y        v-for="(item,index) in List"
7 k# {2 |( ^" ^8 p" }        :key="index"
        :content="item"
        :index="index"
- Y1 K( {! b7 C$ x! [        @delete="handleDelete"
; f4 R! R# t/ W      ></todoItem>
6 W9 A& Z: r6 K% u, p7 E; n" i' ]    </ul>
  g5 K. W: L- k& s: d  </div>
* I0 j/ \+ M+ E</template>
* d+ d% m0 F( S0 X+ g
  d5 s# v! n) l; C- I<script>
import todoItem from "@/components/item.vue";
5 V9 C7 u- q6 X9 b$ T
export default {
4 t; L  J# H0 O# X8 W) I( @: v/ L- B/ |  data: function() {
  \2 Q8 g. L1 G% J1 t, T2 ~9 v    return {
) Z$ }& }) \  w8 p/ d, O: T      List: [],
      inputValue: ""
    };
  },
3 w8 B' ~3 X& Q7 F  components: {
    todoItem
  },
( J' _# v( z+ A2 h  methods: {
) m6 d' y  r5 |6 X% ~: e1 W    submit: function() {
3 d2 {) t1 m& B      if (this.inputValue != "") {
, q1 o, h& V( t        this.List.push(this.inputValue);
      }
( n$ n* e2 X! G      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
+ v9 |) i" U' j: U6 E+ t# Q    }
* _/ X. ^/ }; f% A9 B  }
};
</script>



- Y& s9 V$ ~# b! b2 `0 @6 L- F
/ y6 d6 H6 p1 R6 `4 N
; q6 T6 B0 Q8 w9 A% z' ?( l/ n$ V. C' ?7 ]
; i& [* l" A3 z; H" d. a) ~
<template>
  U6 U4 L2 l0 ~  <li @click="deleteItem">{{content}}</li>
( @8 Y3 U7 U6 |0 e9 u+ v</template>
6 C: C9 Y' w, T2 {
<script>
export default {
  props: ["content", "index"],
2 c- [. h9 v% |0 g* n  data: function() {
7 l5 W8 M* d! b! d    return {};
  Q! V1 b6 [! N6 ?  },
  methods: {
    deleteItem: function() {
4 D! [+ j2 D; ^: _+ o# ^      this.$emit("delete", this.index);
    }
( V% ]1 d8 e4 N6 L' T  }
};
# m$ G+ |+ R  X5 @0 M0 x8 S( g/ B0 o6 @</script>

: N1 K5 O" w2 C$ _