组件方式开发todolist

admin

% l9 U# E- h; j& g  @
; c) d1 m% z- G# T1 h. N) b+ s! j

<template>
  k; h4 i' A- e0 e3 k" E" x  <div id="App">
- _6 O: R8 u4 T: D' W" t    <input v-model="inputValue" />
! K& Z) B5 y" Z8 u6 x    <button @click="submit">Submit</button>
) c: O: @5 I( x, y  G    <ul>
  i( w2 |5 V0 e# }7 S      <todoItem
: r' n. K  \. e- v% M' n5 u        v-for="(item,index) in List"
! a# t7 u% O" g: |6 J        :key="index"
0 c4 F; h& n7 m+ m! w8 L        :content="item"
        :index="index"
+ [8 H4 R/ l) h+ a' ~        @delete="handleDelete"
& F5 ?/ P: M% ]8 V9 l% g, K0 W5 z* w* ~      ></todoItem>
    </ul>
  ?7 q$ z$ w3 O, i8 ^7 g  </div>
</template>

8 ?: ^3 p1 o" |; X<script>
import todoItem from "@/components/item.vue";

# |6 _5 M2 o) w7 ~* u+ Y$ Qexport default {
+ u! B' Y. _) N: Y  data: function() {
0 V: B$ {' F# M, `/ P  k    return {
      List: [],
      inputValue: ""
    };
- ^# Y2 e3 }2 h; L& {- b  },
  components: {
    todoItem
6 u- P7 ~4 S& Y! {; {/ E  },
0 p6 \# A& y: U0 D# s1 v  methods: {
$ o; c- i- j* z! R6 f    submit: function() {
* s3 l& H% ^* s4 \0 E      if (this.inputValue != "") {
        this.List.push(this.inputValue);
; o/ _% N, R3 C& a8 n& \; `      }
      this.inputValue = "";
/ r1 m" N3 g, s  a5 t- V    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
8 d7 T: Y& \+ [( [" g  }
4 a- h' C( ?% E0 ^! M& t};
9 u' i2 A8 I$ D- R: o0 I' i$ L</script>

2 A6 d1 `3 w- R


- ?, ?" S, b) o1 p; r& i' i+ f( _3 _* \

+ @+ }' t. m0 t" @; |/ G
6 V% ]6 u- P$ s6 b+ z( n<template>
6 L3 R  |6 c- y6 F7 y" M" k, L  <li @click="deleteItem">{{content}}</li>
- Y8 y. E. V% y) z</template>
& V9 B* r4 F9 Q* a3 Y. V
$ Z1 i* r9 Y% q/ Z2 r<script>
export default {
1 w: _$ `, W3 `  props: ["content", "index"],
; m) ]9 d; H  C: F8 L) _2 e# y  data: function() {
* Y. z# b: \; N( J    return {};
* |: M. s( o+ I4 U+ v- f  },
1 U& Y9 K( F4 a7 V( h  methods: {
5 w: E* z3 q& ?3 y, C    deleteItem: function() {
      this.$emit("delete", this.index);
    }
0 _8 t( s& |2 V* L. B% f  }
};
</script>

- Y2 n& h% K. e) r% l  i: O( ^) q
' L$ ^- e" C) O" j5 Y8 K8 P

1 r* v6 @) R' B6 ]