组件方式开发todolist

admin

<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
4 o- ?* a" I* S/ V        v-for="(item,index) in List"
) x9 q2 `, ^  [- l        :key="index"
        :content="item"
        :index="index"
+ j* N" q+ y  |        @delete="handleDelete"
& K; d- n1 b' H/ i7 I, T      ></todoItem>
( W3 v3 s3 E9 ]4 H    </ul>
) {+ a9 G2 |; d9 l$ P( Z  </div>
</template>
" Z2 L' ?0 s9 l4 E5 j' O
+ Z# P) [6 q1 I* @. R1 o  A# n* v<script>
% P) k! I4 L# ~" h8 E7 n9 dimport todoItem from "@/components/item.vue";
: X) V5 P5 O# u: t- O- ?, j  F
6 v. A  x/ O, H1 B- gexport default {
  data: function() {
    return {
( l' Z( T' _' b0 J6 ]8 K, `8 s      List: [],
      inputValue: ""
    };
# k# ~0 W. Q, F' u7 a$ e  },
  components: {
. V7 a6 A1 U& |; T% i+ ~# T. B    todoItem
# `3 d1 F/ H3 v" u  },
  methods: {
# j0 e# L* h. o; z    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
. s3 ^+ B8 Z4 l      this.inputValue = "";
" _9 x* I% c! z( g+ U7 b4 F    },
& b  {% B8 S1 ?    handleDelete: function(index) {
! {' c* N4 }2 E- U      this.List.splice(index, 1);
    }
  }
7 O4 ^" O- m9 E- g0 F1 d: b) Y0 Y};
! r* W8 R, B; h5 u</script>
" F0 _! P* ]1 y+ b$ b$ h) b4 L3 p' g
, F0 l  N7 \) O" ]- c5 @) s
' ?. n0 q9 F9 e

) w. K8 z% q' |" K# w


5 Q8 _0 W5 L+ j  t- N, a$ K<template>
- t' ?0 F' X- @- m  D% H  <li @click="deleteItem">{{content}}</li>
</template>
  y/ h* y% A) H2 a
<script>
, ]# c$ \+ R1 e3 [* Q! l4 i% Dexport default {
- Q: C. r" {4 M% k% J6 X  props: ["content", "index"],
  data: function() {
    return {};
9 a$ q+ ?! R; K9 Z  },
5 }& f* |" a1 I* n2 H' I+ d# h  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
" ~5 K' z% u! s+ F0 w  }
, r6 i  |/ o. e};
0 T( Q7 s; x5 o' M' }" k% t</script>




$ W) T3 _+ ?. t' L