组件方式开发todolist

admin

<template>
& h- W+ F# ^& l0 p" n# Y, X/ a  <div id="App">
0 S( V% @9 S- e2 x% G- c& s    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
& D. r0 E' o& ?* b) Q# g      <todoItem
! {& t! Q: r* W        v-for="(item,index) in List"
/ x) G9 ~( ~# |! ?        :key="index"
8 a6 K0 H& I, [& e        :content="item"
2 ?8 W( ~  q; _2 p        :index="index"
, n5 B: Q9 d, R9 H& y  Q0 B* I( V        @delete="handleDelete"
      ></todoItem>
    </ul>
; [8 \, [: K: V5 t  A  </div>
</template>

0 e# w  |" x) K# R/ O/ {8 N<script>
import todoItem from "@/components/item.vue";

( w! X) V7 H0 b. P7 J7 Texport default {
  data: function() {
6 F2 U. N/ x" S3 n    return {
+ Q' H: \7 P7 H4 j" e6 E4 ~6 k      List: [],
3 G' ?' X0 u% O  b, H      inputValue: ""
0 R9 x. e* l; n5 z1 b, |    };
  },
  components: {
. w( g6 s4 p& {' Q1 z    todoItem
  },
3 r. Y2 n, n9 ~$ g7 t  methods: {
2 P, w/ }4 g- a* b- H$ R    submit: function() {
      if (this.inputValue != "") {
3 q& G0 f! W. ^9 u! L        this.List.push(this.inputValue);
! F$ Q5 P0 p+ V9 G) Y2 w      }
      this.inputValue = "";
5 x2 d  i" E. U- \    },
" D5 x6 [/ \: K5 t, }    handleDelete: function(index) {
* C# j5 H+ e. \( p/ c4 `# x, u6 t      this.List.splice(index, 1);
    }
  }
};
</script>
" o2 ?9 X. p: x- B1 H
/ V: ]3 F& F2 ]3 C5 j: [
* ^" p, v- E+ y$ J4 z$ a


& f% o+ s: p) E$ z$ X$ f
, k9 u9 ^, m! o- C! \" \& z
<template>
  <li @click="deleteItem">{{content}}</li>
% o! G; {# |( V8 _% a</template>

1 {& M& O) w, e& H9 q: d5 P<script>
export default {
  props: ["content", "index"],
  data: function() {
    return {};
0 m; d; F, ?* L( H  },
  methods: {
7 T" W0 \. L5 H0 H, ~  K% e    deleteItem: function() {
7 c4 `2 Y1 c/ {; L      this.$emit("delete", this.index);
    }
% ?+ F# O7 v% s+ p  }
$ [( `2 Z0 n0 s9 W/ m5 B};
</script>


& A: `  ]2 Y/ ]% B: t) k
* g: n, o% G3 C/ [' H' y2 M
; `+ ~& a+ T+ P