组件方式开发todolist

admin

  c0 d. I. m2 L5 l

' L' Z1 G, ?+ S) P<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
9 |* H* g, A7 W- t* c# ]        :content="item"
        :index="index"
; N; l2 B$ x6 R! M9 P2 a4 l! s        @delete="handleDelete"
, I6 y1 l$ U' c" m- d: q8 f5 S0 k      ></todoItem>
    </ul>
3 u2 O& u; I2 k$ D) I  </div>
5 o. b3 Q0 \/ f' j! K! |9 k/ D</template>

<script>
import todoItem from "@/components/item.vue";
/ r1 u- [: P& n& ?  f- \  n
" k8 Y  @, D2 A; F5 Lexport default {
  G6 Q- J" @' y5 X( y  data: function() {
- q6 P* M4 ?, G( f& o8 v    return {
+ y7 p, A7 a. i" d, ]  ]      List: [],
      inputValue: ""
    };
9 _/ h& I! D, ?' f3 Q  a  N  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
# C* K2 _8 t( H        this.List.push(this.inputValue);
) f; @( c" u# _4 N1 R      }
      this.inputValue = "";
3 t: ]5 o- }1 H+ ^0 o2 s6 U  m5 h+ m    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
- b3 U+ Z3 W' _7 s    }
0 p1 Z, S9 G6 I1 g& O  }
};
</script>
( O; N8 n( ?- w% i, \' E

6 E3 y5 q+ m: Q7 |2 }4 Q6 C$ G0 P$ }; [
7 U  i5 A' d  t1 D4 Y
4 A( i4 \+ A; u0 ^4 q' M" B

) K4 b, B6 c+ r& o% |8 ^' C3 K
9 b# @" H) C4 K2 S8 `) g: o7 X( g<template>
& T0 u- d! M# P/ L  <li @click="deleteItem">{{content}}</li>
) x/ H. Y& B9 N</template>
+ P/ }+ N* }( o( x1 r. n2 L0 [
' s" _+ Y1 @0 x<script>
export default {
  props: ["content", "index"],
$ p9 @8 ~5 O. Q  data: function() {
    return {};
7 B1 ?, [  \" M5 o# Z% c" M6 T  },
  methods: {
( Y. Z- l2 b+ `/ o+ n- N; T- y8 M2 c    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
# n5 u# B$ H$ ^};
2 T9 V, m. B  Y</script>

' q3 P: v: {7 `$ C$ d

1 S1 O& r' ?# T% I$ d
3 |+ p! ]% Z# b$ m