组件方式开发todolist

admin

3 q' A( i: ^- O7 P( g

: Y: }' p  S4 K9 S+ m
<template>
  <div id="App">
1 \; C+ A+ G' K7 ~# \, S! M( g    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
5 C8 ^1 A5 x- a' A+ G1 ~  L2 B        :index="index"
8 e! s+ C+ `, c9 i% g1 G* a- h* N        @delete="handleDelete"
( o* v3 C9 k+ `4 B. W      ></todoItem>
! _$ v- p$ t0 H    </ul>
  </div>
3 m9 F6 Z5 z3 i6 ^% O9 S  R</template>

<script>
import todoItem from "@/components/item.vue";
. M5 B7 v+ A8 H4 ^
4 Q) O( o5 F5 Rexport default {
  data: function() {
+ n/ R2 m( N2 {- T8 d$ y4 W1 Y' Y    return {
$ P$ x. S1 }8 h      List: [],
* G* J7 {+ S5 u      inputValue: ""
5 _# }2 @) ]+ \0 }    };
. B  l; W( O1 z0 m2 m& a. t, Q  },
& r: v& m7 y$ i8 l% m4 a  components: {
" r  v  |! E/ M/ ?: m0 G    todoItem
  r( b' o5 E" y  },
& F7 C% q2 q( P/ ?  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
6 O. m# W, s' {+ v' d; J5 w    },
4 F! w$ C. ^$ ?. W6 D, h    handleDelete: function(index) {
      this.List.splice(index, 1);
8 C2 s" E& e+ d' b- R7 L    }
; H8 w5 Q. e9 l/ z3 y/ t5 C3 q1 Z  }
" Y2 ~+ x% D- e};
</script>

% A, x5 v; N2 u( K  P' D% J. @


6 t5 A" C/ ~+ G  b+ X+ S- R
3 C8 t2 I# T, H4 s. ]# w+ a) @0 T
4 z0 s! m# f% @' w( A
" c' o+ p+ m' W, d% V8 z<template>
  <li @click="deleteItem">{{content}}</li>
</template>
! K4 L% T# s% _3 z3 r& K( L* a
<script>
6 c" S$ A6 U5 Q; ?export default {
% _' C% f( e* n+ N! x# ~  props: ["content", "index"],
  data: function() {
    return {};
  },
% H. n  P; q0 ?2 f1 F) e  [  methods: {
* B% }, l, Z' f) k! w1 q    deleteItem: function() {
9 A5 {) ]' A! Z$ S, {      this.$emit("delete", this.index);
$ s& y2 Y; Q/ {2 r0 ^* J- X    }
  }
};
- @& m, b" r' c0 h* C% t* S</script>




! L- e  ?7 z' ^% @$ [+ G% l