组件方式开发todolist

admin

9 ~7 t+ f) X+ s$ i! L
9 S# X4 E; B# z: e6 I3 |- g

3 i2 K$ z) h+ n3 p<template>
  <div id="App">
6 N' F4 Z2 ^3 `) b( S+ @    <input v-model="inputValue" />
* ~' V9 B- [' R3 K1 ?    <button @click="submit">Submit</button>
/ u" u. i0 x% r# a! a; k    <ul>
& S. f$ y, Z  M' e7 b' R      <todoItem
8 A! W) j- y# f6 D0 ?/ ?& J        v-for="(item,index) in List"
        :key="index"
        :content="item"
) m% Z. Y/ O. |' V        :index="index"
7 v% \5 R- U: V- W9 |5 T5 G$ r        @delete="handleDelete"
      ></todoItem>
/ y2 X0 Q, a  Q! D9 K    </ul>
: x/ Q/ a; _, e  X( k2 x2 E  </div>
& i$ H& y" y5 W. Q( I$ w</template>
7 d4 L) S, t/ K$ `( R. H# ~
4 @1 C. s9 F3 w9 i6 m1 r3 m) O; q4 I<script>
" _5 H3 [5 v: R: S5 j& gimport todoItem from "@/components/item.vue";

& t$ {5 b7 I/ Iexport default {
( m2 W) k" ?& E: y; h, \: M4 z3 ?  data: function() {
    return {
      List: [],
      inputValue: ""
    };
  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
  F2 g& C5 h6 k& }        this.List.push(this.inputValue);
      }
" f- J4 `0 K5 C( P$ f- E" L      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
/ s9 s$ @  j3 F7 B- O# @% ^: k' O3 x</script>
+ m6 _2 A" _/ L2 p: \. P1 e
: }- J/ m! k0 L% z9 r  I" O
; l, Y$ |$ c5 B5 P. Y3 v, n+ s  p9 J


+ o! K. K( B1 A

<template>
  <li @click="deleteItem">{{content}}</li>
3 L; @4 v2 E  l5 U</template>

/ D  M% F" C% }, L3 B, G<script>
export default {
4 M  S' O7 [2 Z2 M2 Y' }) b  props: ["content", "index"],
* p, n) ~0 Z) u* g+ o- l3 [  data: function() {
    return {};
  },
  methods: {
3 b( ~( v  f" i4 d4 E; J    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
& H+ R) h" Z$ M</script>
  r( y; F/ `; e4 R% B

+ o5 f+ e. ~  r; s' T' @
7 G9 o2 x' m4 v  |' s
3 `6 Y" Y- h% U/ A7 B