组件方式开发todolist

admin

5 r9 t) W# x7 Y5 n7 G0 B. O

; p9 c0 S" ^. }; {
<template>
6 t8 V3 k* ^9 s  <div id="App">
    <input v-model="inputValue" />
8 v1 F9 F  O5 H4 B; U8 o2 O    <button @click="submit">Submit</button>
    <ul>
: f0 o$ b7 o, |& n; G      <todoItem
7 y5 y, z! Z& ?9 R' X9 y+ v        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
5 b8 P9 O9 m6 C) P& k4 N7 o) k! N        @delete="handleDelete"
% g/ t, T6 e. M) m+ O# `% U      ></todoItem>
    </ul>
  </div>
</template>

: @  n0 C/ L$ B- T<script>
# T! }' `$ {$ {/ U$ Mimport todoItem from "@/components/item.vue";
* M+ p5 \9 C9 f# j0 l
export default {
0 B2 m. C5 c9 n  data: function() {
1 l7 {4 z, N/ G7 ]    return {
/ [2 ]4 u6 ~) Q  i+ ]# t      List: [],
      inputValue: ""
    };
1 ?$ f2 {) h5 N  k6 n7 g- |  },
  components: {
    todoItem
* k8 o, {6 R( H7 X' |: U; y$ a  },
  methods: {
7 H. w1 N! A- E+ p1 z; @" p    submit: function() {
      if (this.inputValue != "") {
4 L' t" P6 b+ K- _3 e) q% R1 ]        this.List.push(this.inputValue);
! y5 j% C. t5 F9 ~1 o      }
      this.inputValue = "";
    },
( m# C4 [( E/ U" y* j    handleDelete: function(index) {
0 {3 g7 m6 a/ f  U! t' Y      this.List.splice(index, 1);
) a4 D8 B9 E& q3 f# X9 R    }
" C/ `& e4 R# T  t3 ^0 }: o1 I! w  }
};
</script>

0 w; g+ d9 e- N) r/ P

8 e8 J! E: e- f( M5 x
0 X: q& J( V) H+ I' ]


/ X1 w8 t' e+ B, K1 O. j<template>
- g8 [" v7 n2 [% B, l. t, s2 c  <li @click="deleteItem">{{content}}</li>
3 `6 W: A+ V6 a: K</template>

<script>
export default {
% h* @% p- p' d+ o  props: ["content", "index"],
  data: function() {
    return {};
, L+ A& V3 g  a  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
7 r0 \+ E+ z$ c3 U: x    }
2 N# d: H: k% J, `7 ]: H# ^& F# _+ ~  }
};
# W% d6 Q3 g1 r1 U; P$ _: D, A</script>

* j0 }/ f1 O: `# _7 L
8 m% [  j8 Q4 i' G: q& N9 L: e