组件方式开发todolist

admin

8 R* o6 T9 g  y3 f5 s* B0 Y- R

$ a9 m2 c- V' U4 |
<template>
7 c4 n4 T3 ^+ t' ~' `5 {1 O  <div id="App">
1 u) h4 l: w9 T% g0 r. q3 {3 c( N    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
& c+ b7 ^3 x1 g. {$ O    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
/ p) v- v. l7 \        :content="item"
' Q( l- v; V  _) a+ E0 `        :index="index"
( {. C  m6 B% b6 Q        @delete="handleDelete"
3 e. G" |, R! l+ s8 ~9 q: i; O      ></todoItem>
    </ul>
: i! x- o- g! t1 D- ]! b5 U  </div>
: U% z5 H! M, h+ S% P( T- C</template>
3 q9 G6 b; [6 V, S
<script>
4 ]; h' V4 M0 q! u7 y! k  Timport todoItem from "@/components/item.vue";

2 a& ~. A7 K/ z) m" Pexport default {
( T! t2 r, u+ P" s" [6 _  data: function() {
5 X( E8 J& v- [, s+ y; z    return {
      List: [],
      inputValue: ""
    };
7 M8 _+ y$ T3 H' {' Y/ {' h  },
  components: {
    todoItem
  },
; U" M8 u; ?% ]8 M: d  methods: {
    submit: function() {
5 ~, d+ ~+ {' F& T- E# P9 u      if (this.inputValue != "") {
        this.List.push(this.inputValue);
' s8 [' H, r/ @: b% W; L! ?      }
      this.inputValue = "";
! Y1 z2 Q) B, S& u+ ^. g3 a    },
. l  M. |7 L& P/ v    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
3 z& @% Y5 ]: }* t1 f; R  }
2 N" C# V; N' [' ]1 O: L};
3 n7 }. m- @5 J5 T8 k3 W</script>
1 f: m: g9 S4 G6 s
, @* C* J/ m# v9 C+ b" E
# G/ V% K$ H- N


: K3 F3 E& S2 k" h! a

! W9 B' l# {4 i$ H! k' f4 G  }( u<template>
: ^0 k$ j: u( o% z2 R2 U- x1 I9 b  <li @click="deleteItem">{{content}}</li>
</template>

! h( v) K, u) B2 m<script>
export default {
  props: ["content", "index"],
  data: function() {
    return {};
  },
  methods: {
/ U) {% L5 F& k( Z3 w6 F0 I3 Y" f5 e2 A    deleteItem: function() {
      this.$emit("delete", this.index);
4 p3 j: o3 ?$ O' t. G  C    }
  }
};
! j3 L0 ]1 X$ R- X2 v7 _' y4 r</script>



/ k) [0 b9 [3 {' b  x8 t. R- o