组件方式开发todolist

admin

8 ^7 i; ^7 h7 R/ S! Z! b

6 ~0 s/ v- K1 M( g2 w. t<template>
* |+ F1 d4 w6 C9 F( _. K  <div id="App">
% w- {- k# q+ p4 r9 G    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
# H: X7 Z! V& d6 |& J2 Y( @1 y- X    <ul>
4 g! Q$ y- D# W8 ]! r8 y" C- U      <todoItem
& F0 u# v- m9 |% @# h3 j4 O        v-for="(item,index) in List"
        :key="index"
" v9 l) r2 M$ _9 F4 g* X% n        :content="item"
        :index="index"
5 G2 R: Q2 ?1 N# x        @delete="handleDelete"
- n: ^# ]/ ]9 ~) E5 R" p+ s      ></todoItem>
    </ul>
% K5 u) k& ?  ?$ r# j1 q  </div>
</template>
6 J" W, t# ]. l8 g/ z
<script>
import todoItem from "@/components/item.vue";

export default {
  data: function() {
6 e' a; N1 E& ]; ?4 c' ^1 y    return {
$ j3 a9 D0 J6 ?      List: [],
( l1 z) }, i' u5 @4 x7 U2 ]4 j      inputValue: ""
5 @) D4 s7 L% V/ h    };
4 A# [# F$ p1 |, u3 `( N  },
  components: {
7 r9 E. Q( Z4 D    todoItem
  },
# F, y! L. c4 x, n0 v0 l  methods: {
8 [2 Y' S- G' U    submit: function() {
6 U1 d3 p1 M" w, b9 ^; r      if (this.inputValue != "") {
" O$ }" K3 n. X1 F/ ]" I( I0 m        this.List.push(this.inputValue);
      }
      this.inputValue = "";
2 S2 D: ~+ |7 [* a2 `    },
    handleDelete: function(index) {
7 u6 }! U0 Z- k+ ]      this.List.splice(index, 1);
7 R3 P" P5 D) [6 [    }
  }
& ^1 [$ {: k1 i+ {7 \};
</script>
& w2 h4 M7 }  g7 v# {
* b/ O/ |2 p! f$ U


1 |0 R3 \( a$ S0 l" Z# N( v

# m5 |+ x1 [* c6 _* G4 v
  ]* n9 P7 q$ H; g6 n% Q<template>
  <li @click="deleteItem">{{content}}</li>
: F$ t6 T1 v! ?2 O</template>

<script>
# N( y" S$ _4 W$ i" dexport default {
5 O( h+ ~# L- [+ T0 Z  props: ["content", "index"],
" M8 P# y8 R+ q" Y& ^) \. u  data: function() {
, W3 K6 w4 R3 K    return {};
3 l/ H- ]) h7 c' Y& w4 b  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
& I; S6 N* u7 V( a4 |6 }    }
5 v, b3 ^% r; E  }
+ M, S$ y* v) e' q9 E};
! d4 _2 k; U! P" W' [</script>

( P0 i7 x; b1 ~' \' c6 J9 z4 T4 m

$ U# L/ P4 Y0 y8 i; n0 g5 |