组件方式开发todolist

admin

$ p( I  B; c- W9 C1 |8 s+ X1 T: Z
1 _' S3 N) ]5 x: H+ ^

6 t4 d' A& [9 S( Z* X, v& F<template>
  Y* n1 c& i, `9 L  <div id="App">
% B' J! P6 s4 j    <input v-model="inputValue" />
+ r! z' P7 i" u    <button @click="submit">Submit</button>
: ]; o, v8 D# ^" I' P  @' A+ G, ?    <ul>
* J" ~+ Z7 @7 ]* D! {( k  H      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
. T  k5 Z/ ?( v) d        @delete="handleDelete"
( F" A0 H- |5 k, T* H/ D9 v/ F      ></todoItem>
    </ul>
  </div>
/ w' L) d' q/ x$ f+ y2 W; ^8 x</template>

7 P1 s( Y3 y& e2 w( O+ k; i- C  V<script>
! m' E/ ~+ c/ r& d7 i& ximport todoItem from "@/components/item.vue";
! s# J% Y9 J8 o0 \; N9 P5 s- K/ x' @
8 n' @5 [: `' c" a5 x2 P2 Rexport default {
  data: function() {
( o( a9 O( w. E0 r7 K3 ]9 r    return {
/ D7 M# Y, G/ o' e( ?3 a      List: [],
$ R4 F' z" B2 l6 g: m# ~      inputValue: ""
    };
+ q1 r. Q* N% K- t' f* }; h  },
3 G6 j+ {6 j/ ^9 a' M8 o# E) p$ [  components: {
    todoItem
) b7 x( a' `/ P0 _, u9 d- ]  },
1 Z6 r2 L5 z4 D. ~/ F1 y2 a5 ]  o  methods: {
' ^$ A' d& l' M+ f% u, J% A; E    submit: function() {
      if (this.inputValue != "") {
: r9 e+ l2 f& l" i; W6 _3 p, K        this.List.push(this.inputValue);
1 v* P( i9 n. p. j  l4 F      }
      this.inputValue = "";
3 b3 M. {8 ?& a' K4 c: O# ]0 d    },
    handleDelete: function(index) {
9 Z; U5 {/ \$ k. n) g      this.List.splice(index, 1);
    }
" \% X# W% A/ D4 o  |+ w4 }  }
# q- Z: {7 e) H- o: l1 e/ I' ^( R};
</script>
! E# K, t. b5 e. ?, M6 q



( {+ G& k6 b$ {/ O
) B, a4 ~/ l' e4 e- N
/ D+ }- C6 W$ P$ G! U. b; f' u
<template>
  <li @click="deleteItem">{{content}}</li>
</template>
0 C3 D' y3 z; x( D
<script>
export default {
1 N' T# B: K# |9 `" i# Q: A) l0 _  props: ["content", "index"],
  data: function() {
! m- ~$ K& ^! d2 }5 p; A    return {};
  },
  methods: {
' g9 o7 r4 y/ d% v; c7 o    deleteItem: function() {
      this.$emit("delete", this.index);
2 i( |( J! ~( ^! V$ ]    }
; @: J% |( Q& b, i/ ]0 U  }
: E/ b( y2 [# o, }; U  m+ E' [};
, F% p. n4 a' [5 w6 j4 `</script>

0 w( m6 c5 U7 n. u+ e- K
! j8 E  F2 q# g' L. F  Z# m
4 Y" a- z5 g+ Q( k! [* C! \
8 o  |7 Q, \' z  a3 T/ f