组件方式开发todolist

admin

; q. s5 A- b4 x5 m2 c
0 V- a/ B7 t+ Z2 _2 m
. }& c2 ]1 u1 H$ {& [$ y. b: N+ `
<template>
  <div id="App">
/ x; _! P5 O4 _# _* P    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
, [3 D- m# I, s! ?  {0 ^1 C: m        v-for="(item,index) in List"
        :key="index"
" ]+ ~7 S# s' C' {0 a, T1 D        :content="item"
7 `0 Q* G' b4 o$ ^) v        :index="index"
        @delete="handleDelete"
      ></todoItem>
3 m* _3 ~2 [/ @% Y5 C2 f* l    </ul>
, X: R. y5 m8 z4 i8 @. ~# P. U  </div>
</template>
; }! L/ g6 N& [6 m" V
<script>
import todoItem from "@/components/item.vue";
! K7 @5 X% O% i$ r8 ~4 d
% k% `6 g, h  D7 C# s0 A" ~export default {
1 g1 @% v- X, l( `  data: function() {
    return {
: _% k! v8 C5 \4 }# c      List: [],
$ N, U8 i: F+ l; D* M. O6 K2 W      inputValue: ""
    };
* u2 H- P% `! R, `  },
  components: {
" R" l) b' `9 i/ `; O: f6 w5 Q    todoItem
% `/ W4 S% a% I/ |* c; f  },
! [. q9 D( W* ~  Z9 G4 L( S6 Q  methods: {
7 o$ i: E  a( |; i    submit: function() {
/ Y" W' u9 ?/ g  d) P      if (this.inputValue != "") {
1 g4 w6 N( A/ e# \, d& `- T        this.List.push(this.inputValue);
7 _) N+ j* ^6 T* L" D- U: h      }
      this.inputValue = "";
* U( ]8 {2 p" r- C1 y% e    },
    handleDelete: function(index) {
( I5 T7 p' y: u3 T      this.List.splice(index, 1);
% G4 S, `" h0 w/ ]    }
  E0 g8 A( \& d. n, t  }
; J+ m$ C7 T8 ]- {$ e9 B};
</script>
- A$ u$ o: i0 x( E# S# j4 |6 G2 n

1 P  {$ K# o$ ~2 P3 W

; D& D' L3 t& z' G' F" {8 V( l( s
$ j+ D% b, m* M, {
% i$ H7 D8 [0 l! E- R
/ P8 W" S( p3 x9 N8 K) Q<template>
  <li @click="deleteItem">{{content}}</li>
8 M) Z% g1 N0 u# P* p6 G) o+ t</template>
, O9 D' Y4 }+ M& H" p$ R
<script>
export default {
  props: ["content", "index"],
  data: function() {
" [! S5 g, [: b4 O* z' o5 F. N    return {};
* w& `2 N- w, z8 K& h/ y7 h# v  },
3 [8 a# l% Z. R! Q  methods: {
+ O3 H; j; ~+ x, m* {    deleteItem: function() {
      this.$emit("delete", this.index);
6 [. B$ c: l* w6 U    }
8 o6 D( z% j9 K0 C# b6 e! T) ^- a  }
  [* C# w2 v( G: e. Z: Z9 Z, ]& d};
( A2 {6 r9 p5 X/ M; N</script>
+ E+ g, @% Z) m6 J7 {
( d, t# h0 m# ^* i# i8 h6 g7 l

& r# T% H3 z; E6 f9 J+ d
$ [& i5 o6 ~- Y) x