组件方式开发todolist

admin

% w9 e9 q6 C  z, D9 t0 o
) N! [5 ~* C. ^- a) f2 V) w<template>
) D+ j7 q1 j2 l- Q  <div id="App">
  d- r6 `" ?% E  ~    <input v-model="inputValue" />
" t) r. L9 E! Y8 q! M  D' T, B# m4 p) |    <button @click="submit">Submit</button>
( M' O6 o( r) E0 u0 z) ^! p* v" P    <ul>
      <todoItem
$ i. y% E0 q( \: M        v-for="(item,index) in List"
* b$ r  w1 T. W# ^: A        :key="index"
        :content="item"
' b/ E1 k& E0 o9 i, o" T0 B% S        :index="index"
( N) s, q5 W$ x  i3 g6 F( w6 Z& ]        @delete="handleDelete"
      ></todoItem>
# ], J$ o. {  M" V8 ?    </ul>
  </div>
( O" S5 z2 _, e7 A</template>

: d% A( J1 `8 z6 d<script>
import todoItem from "@/components/item.vue";
6 D, u; |' P# d4 z& d6 V: k
export default {
+ z4 b7 ~% I7 ]# M$ D/ Q- c  data: function() {
    return {
% @. g- i0 b# O6 f. X      List: [],
      inputValue: ""
& E2 h5 v+ ^. i; W6 A* {    };
  },
( [2 n# b- K8 D; }/ |7 Q8 L  components: {
    todoItem
  },
7 P$ ?9 Y5 j7 H5 ^' \( T  methods: {
    submit: function() {
% e9 ]) Z0 r/ [2 m      if (this.inputValue != "") {
        this.List.push(this.inputValue);
- N: F7 V% ^- H4 ~$ S      }
: K, L% y8 G- w      this.inputValue = "";
    },
' `/ `7 J  `& L3 A9 \4 }    handleDelete: function(index) {
  a; H0 K8 r. ?' ~9 n! o      this.List.splice(index, 1);
5 \( K, d4 X  r" l* Y$ [0 q; N    }
  }
};
) B# L# n6 a6 W" S% K! ^, H</script>
- K. ^; p, G" Y
2 w8 [% z' f& ^( o/ I1 e, A- {
. E; e) O. U- C5 X3 f! Q


7 t8 w6 c8 |7 x
7 f; \. ^9 e* B
<template>
* z: ^; r+ E$ G, V: {3 r, O  <li @click="deleteItem">{{content}}</li>
+ R6 J' ?" Q7 z! F; U: P0 L</template>

<script>
export default {
3 J0 T5 f( V5 n0 y9 ?. N8 ?% Q  props: ["content", "index"],
  data: function() {
    return {};
  },
0 }, o) v  j0 n$ d) {5 y  methods: {
    deleteItem: function() {
# }0 @* H! B* v3 f) Z( g      this.$emit("delete", this.index);
0 |" c/ z) f  G) |. M8 o7 f    }
  }
/ r( M3 a- V8 h$ x};
4 D5 }. v& B: u9 }4 ?1 z# f; [" R</script>

  S% b# e4 x) o7 c, i7 H
2 d7 j0 {4 J* W3 ]- K' ?