组件方式开发todolist

admin

( N' Q$ G+ P1 e7 Y

& d* ]1 T7 y! b0 O: r
9 x- d4 R: T7 ^; V, h8 x" P* U<template>
  <div id="App">
    <input v-model="inputValue" />
5 `! E; j# t9 B$ N- S5 N6 Z8 R    <button @click="submit">Submit</button>
    <ul>
      <todoItem
* U6 n4 O2 C: I& ?' d        v-for="(item,index) in List"
8 r/ @$ f( C' I# l  y7 _! V, w* P        :key="index"
        :content="item"
        :index="index"
+ q6 J$ ^: t, v0 O% q, g/ N        @delete="handleDelete"
      ></todoItem>
8 `% v* B2 E! g7 S/ }! K' \    </ul>
  </div>
</template>
" ~1 K, }, ^6 w2 d' c' v2 Q
, [+ m! G( Q( t<script>
import todoItem from "@/components/item.vue";
9 r3 g1 ^6 s9 x- x
4 }- J7 V8 f+ Aexport default {
  data: function() {
* z9 E" s+ t0 b0 Q# D7 h# f    return {
      List: [],
      inputValue: ""
. q+ q/ D" O7 T+ d  }    };
, {$ ^2 h8 D* `  J0 v/ C* Z' X  },
6 N$ ^* }) W3 \9 @  components: {
    todoItem
  },
' O, N% g+ t  ~- k6 v  methods: {
0 P4 K# T, s% ~4 a    submit: function() {
. y6 N+ [0 Q  h& h; S2 L4 c      if (this.inputValue != "") {
. B# C( D) \2 b, a( E, h: m        this.List.push(this.inputValue);
" p. N* Q& o! Y* [$ U      }
' E. U. n( m! O$ ]2 B# _. ~  o      this.inputValue = "";
' K3 O+ R  Q$ |    },
% L% m3 [& Z- n4 ~2 N2 J    handleDelete: function(index) {
- S- h. \7 u* [3 z      this.List.splice(index, 1);
    }
( O5 U  S1 u) O$ u- Z3 L' [  }
& s" T6 W# E* y- J6 _1 }5 u/ e};
3 [) h" c4 U( b; w3 ]7 C$ M+ D# R8 A</script>



  _* c: a) O2 x" r' }6 l

, p6 C# v+ y0 U" Z) A

<template>
* {8 y3 K! d9 O  p$ `. Z8 Z  <li @click="deleteItem">{{content}}</li>
</template>

$ C5 v. X( j: h$ q# Z) m: r+ y<script>
, W# n& f1 T9 v: D" t" [; Gexport default {
  props: ["content", "index"],
3 b0 R$ f0 G* D8 o) [; M) s) {% f  data: function() {
" F9 y; `7 \8 a$ P    return {};
6 \; o  C( U( i/ p% p  },
2 ^3 [* }3 L2 I0 Q: Z# I8 W# o' e  methods: {
, g0 V) q# R# ~. E' [6 J  X    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
, d: Z1 o. z7 T, O5 c  R4 U</script>

4 Y& E* ^: _" E5 V8 |

# H" F  m" E7 u  u( o/ n
+ l+ t1 j4 ]3 E$ h