组件方式开发todolist

admin

8 ~6 z& l* M4 i
, e- P( k9 e" r% r& i, d" ^

. p$ f, i; U/ Y5 U4 {, u; O$ q0 p) y<template>
7 X  d; ?. y9 _" [  <div id="App">
( o0 o  ]4 d: ?) K1 h5 N    <input v-model="inputValue" />
1 `0 [+ M& i$ {1 B    <button @click="submit">Submit</button>
    <ul>
; y; d  ~7 K1 `2 _) o' C9 K      <todoItem
' `3 ?, z) O9 r4 Y# _        v-for="(item,index) in List"
- r$ m9 f5 w2 D7 p6 Q5 B3 F        :key="index"
1 K& C& k' F% A9 F& u        :content="item"
3 t+ R' O/ m+ N        :index="index"
        @delete="handleDelete"
      ></todoItem>
3 x0 _! p4 f) _    </ul>
  </div>
. x# E/ h0 }. }# o</template>
9 O: n3 H* V, @$ U5 c- ]0 r/ H5 a; }
  e- I5 |! T) z" x4 _) p, }0 [) ~<script>
import todoItem from "@/components/item.vue";
0 [3 Q, z, h4 \3 m- V, T
+ V4 F* O7 H8 a8 Rexport default {
  data: function() {
    return {
7 B" w% O' g) T      List: [],
$ o6 w& y2 H& K! {7 L3 m      inputValue: ""
    };
! Q$ ~( k7 a& d* V* B4 n+ t$ g$ n  },
  components: {
    todoItem
  },
0 Q! b/ k- o" j6 n0 A: Q7 \  methods: {
    submit: function() {
- h$ U2 |7 e" l      if (this.inputValue != "") {
: j$ D: Z$ _, N) y4 E+ h        this.List.push(this.inputValue);
      }
      this.inputValue = "";
3 Y, Y  h6 _. e, Z( x; x    },
. g! K% ~3 Z' ?    handleDelete: function(index) {
      this.List.splice(index, 1);
* n  x: }5 J$ x# U' K    }
  }
};
</script>






: j8 j2 x; w# L. F6 @- w6 Y0 A
& a  s) w2 @4 [2 U8 k" I( f<template>
  <li @click="deleteItem">{{content}}</li>
, b8 S+ N* m+ \9 v</template>
# T% S* g3 M% ~7 L" R* F6 Q" i
- z: K" u' W2 n5 ^. p<script>
* S! Q: j  ^! R8 c0 a$ j$ Gexport default {
6 Z  @1 [, [' o# e. {- U& |$ G  props: ["content", "index"],
' _! g9 [% r  h5 l  data: function() {
$ [. ?$ [; y, g4 }5 {: Q: ]; G: u    return {};
  },
# Y( H1 s4 s3 q* u& b# _# P  methods: {
    deleteItem: function() {
8 O* Q" n$ r; N      this.$emit("delete", this.index);
    }
  }
};
3 |) W6 n8 L* E8 @# G+ m</script>

/ `' l+ _# a/ E/ o

! R# |5 G! t- Z, W
6 a5 [3 T" ^: U! Y% A% I; }