组件方式开发todolist

admin

" m, ~/ P* ]- x
<template>
  <div id="App">
9 b; W# p+ C& V$ d6 D4 d8 M. d: f    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
$ ^4 h. G. u% W9 s$ t, @3 j    <ul>
6 a. k& H- s% m# A( l1 o      <todoItem
4 y3 [2 p3 o3 M% c        v-for="(item,index) in List"
        :key="index"
. W! D' I$ d+ K4 ~  l        :content="item"
! w& b+ h# \* z        :index="index"
3 F" x$ W8 D, @        @delete="handleDelete"
      ></todoItem>
; z8 x8 r8 D+ n5 l& ]    </ul>
  </div>
! M: j: h" V6 U0 ~* c, ~8 r</template>

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

$ T3 M$ F3 d; T1 A1 l$ n' nexport default {
  data: function() {
    return {
      List: [],
4 ~* \9 T0 k: {; w1 S2 e- n      inputValue: ""
    };
( {) P6 Z1 E4 D  },
# z: ~7 c! z" q( ?: e1 v  components: {
: T  [3 N/ u5 a" S, r9 f    todoItem
1 z/ C% H2 f9 P5 K  r  @" Q  },
! x# b8 M& Z$ @7 O3 e2 h  methods: {
& F  O) K6 D3 C+ v, [  W    submit: function() {
! o' ]  {$ V3 A4 u  N1 m7 w  g      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
8 d: |- }; [5 w" u; _$ E    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
4 e; q) R% b2 _8 E5 W* l( P, G  }
" P6 g) v. ]+ a% C+ v! C( U};
+ \, Z+ d0 n& K; e! j</script>
: G  v6 q* h5 R, v! I. Y
& E! x, q& m2 A- l
! k( h. G- m* I% X/ o( m  [

- p& I% y& X$ ^; L! Y3 p; }* I

4 D; a) E! D. `) \4 i
6 a; |6 p7 J5 _, \. I+ [3 o# u. |( {<template>
  <li @click="deleteItem">{{content}}</li>
1 ^# h5 @- c. H2 F& T; L6 E! R</template>
; o" y2 @' C" Q. ]8 Q
! z7 ^* X7 N& l5 ]% l<script>
export default {
; Z/ D8 x# J! ~% K' `0 J0 E. M8 x% Y4 F  props: ["content", "index"],
  data: function() {
2 ^" g6 v* }$ `- C8 l9 c3 l' }    return {};
' R1 b" O! Z6 R$ W  },
  methods: {
7 Q. E: C+ y( u: T  G    deleteItem: function() {
      this.$emit("delete", this.index);
! g0 X8 N9 F5 A$ x6 ]+ b    }
  }
};
6 R2 _4 S' K: j$ _* b/ n$ x0 v" b2 C8 t& L</script>
$ n3 K5 D6 ?) }5 T" s

+ N; x2 G0 z! z# O) Y1 \$ j
( x1 I7 f5 l/ s. x- T