组件方式开发todolist

admin

$ Y; f  M' h* G2 J0 D8 P  V
<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
& \, f( t% t: p* c0 i; Y# g      <todoItem
. Y6 t0 P% R2 W' J        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
</template>

* q. @; S- Q8 u% A/ t: s<script>
import todoItem from "@/components/item.vue";

' Q4 p0 v! }0 Cexport default {
  data: function() {
" [3 M3 C, \0 }2 k% O5 T) R    return {
' g' p1 O" R% C$ x  G' j, G      List: [],
: }! Y5 K  K" X+ e6 p9 z4 V1 ]2 x      inputValue: ""
    };
' \5 |% ~/ z# b0 `# _2 L* W  },
# l; _! x+ q( D! L  \  components: {
3 f/ a# p9 i+ C+ I    todoItem
7 A8 e. Z* q: _8 _  },
& |$ C* q* f. h! q( J. T, F0 h  methods: {
+ M3 F, X- n! F6 b' u    submit: function() {
6 ]# _* N- h* G: w& |      if (this.inputValue != "") {
9 |; J# E" V# v. U/ u6 \6 }. p( P        this.List.push(this.inputValue);
+ c% t1 X  g$ g5 k  C      }
" ^3 g! h! W3 U% f1 ~6 `. w      this.inputValue = "";
    },
* g! T$ r8 k0 y1 `( l% m    handleDelete: function(index) {
  \, Z- L- A1 x9 B' y      this.List.splice(index, 1);
) a. v/ \. p0 v! X% s    }
' d6 `7 q) e9 b7 U8 t3 T  }
( Y; `0 g! w% m8 M/ w};
$ l; h, {1 Z/ U+ T3 V</script>
( I6 _% f2 r1 Y, R& o/ s
+ j( E  C3 H( s/ E' \  D
- Z+ C3 f: ]5 d, d1 P9 q/ c
8 T  m+ A% k* j; _' C  g1 I

1 v$ r' E/ w- p1 }8 N7 P
( B' o+ o4 z5 A* l3 d' i& N! n' ]
0 v; ]! f  h) D  m  j<template>
$ \6 n  E: n# [* r  <li @click="deleteItem">{{content}}</li>
1 X6 u! U2 D7 ?, ~! i</template>
! T) i' _+ O! E6 w
<script>
export default {
  props: ["content", "index"],
  data: function() {
" k6 F) \, A% h- X- H$ v    return {};
6 `6 w4 |- F0 i1 ^! t  },
  methods: {
- i/ y3 P6 J9 X) X. i; Z    deleteItem: function() {
0 S: g9 \! x" `; X' ]% r      this.$emit("delete", this.index);
    }
) d* `, E  o& W" ?  }
" z* D9 ]8 y$ T9 Z8 s2 ^/ j# H3 S};
</script>
% Y' o. [/ I# \
& _. B2 ^( D  r+ I9 ]7 }  A7 u7 K


- ^1 V! J5 J; u; n- D