组件方式开发todolist

admin

5 z& N" L: m$ m" C9 O7 b8 d
4 W/ C% f3 q" f& o' a0 A

<template>
; J: S5 R+ K$ t' B: e7 q+ b- O  X$ C  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
3 }$ b( ^" P' q( R/ I1 m    <ul>
! ]+ n) J6 }7 G& o& ]6 |* U" Y      <todoItem
        v-for="(item,index) in List"
# }! ?( B2 h$ {+ _* n" P( S( p        :key="index"
        :content="item"
! b8 z! z8 J" w        :index="index"
1 y% G1 W/ S- H* u        @delete="handleDelete"
5 u+ B) o! F" d      ></todoItem>
    </ul>
, m+ k1 q7 ], h8 P  </div>
</template>

<script>
import todoItem from "@/components/item.vue";

export default {
4 d1 R, T. R! w# l6 a  data: function() {
    return {
      List: [],
6 @5 M6 n0 x$ V7 P      inputValue: ""
    };
  },
  components: {
* \& w7 ]2 }. O    todoItem
* e3 f) Q* l0 M  },
  methods: {
# e/ w5 C7 H! Q3 }    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
+ ^4 W4 f( {9 M' S1 p+ I      this.inputValue = "";
* s# H: c8 x9 u% h" D    },
    handleDelete: function(index) {
- d3 {* b6 \# s$ ?& d, S+ ^      this.List.splice(index, 1);
& H; ?8 q1 ]1 M) t    }
  }
0 b4 G% Q) b5 {9 L: S' k) X};
5 G4 W0 s) ~, E6 e8 w( p: c</script>
4 O7 l& p- g' {6 O; p

" T$ M4 S% F! T( w
- {% M; D0 X# |7 k8 r: H

4 O# {2 B" w! S- q+ Q/ s0 z5 p3 F

6 A. _1 G! G$ c. ^8 J3 L& ?; c<template>
  <li @click="deleteItem">{{content}}</li>
</template>

<script>
& O2 f! k. \! P7 eexport default {
: d2 X7 o/ W  U& p% s' Q, z  props: ["content", "index"],
  data: function() {
    return {};
4 ]. S# X; e5 l  },
/ R' O! U( d1 R/ v/ T8 z  methods: {
) i# ]: [/ o2 R- o/ Y    deleteItem: function() {
6 S( o1 W2 }4 _! f/ S      this.$emit("delete", this.index);
    }
7 ]$ ^5 K/ @4 S  V* @9 U7 t  }
0 X" N2 q4 ^) k! {};
</script>

8 e& y* b# r7 z+ ?

; ?; n" D- n& D+ Y, A. e