组件方式开发todolist

admin

& G3 c4 |! R! T0 U+ o, P. Y


<template>
  <div id="App">
! i; {, {" b* Y: `    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
9 m7 n# R  n# ?/ G# `    <ul>
      <todoItem
- V' h& J6 K+ I4 J+ J; T) B! u! H  Z' _        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
: J8 [$ M0 g/ }! ]      ></todoItem>
    </ul>
# K7 K0 J& ~2 e  </div>
' t# ^. F/ N4 ]# Z/ {0 _</template>

<script>
3 j2 z. m; e! O( z0 J' ?- Limport todoItem from "@/components/item.vue";
0 ]3 ]1 ~7 M/ X+ }
) f* K( P# t2 T2 d" _) G* |; eexport default {
  data: function() {
: z# X7 Q2 a+ ~' ]    return {
/ I! v* F( a( E2 r      List: [],
      inputValue: ""
0 p( r% M$ g  z0 N- _) j3 Z& C2 [    };
  N; Y1 I6 {5 j9 F, J  },
( S+ O% b6 }! n8 R. ^* X# [  components: {
    todoItem
  },
: o" ?: O/ n, S7 p  methods: {
9 v$ I% m! {6 T1 _- H* _6 Z( e    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
/ j6 l/ T4 r& V' ^      }
* F6 j" [/ @' Q. a. d) X$ Z      this.inputValue = "";
: Y8 l5 o4 L0 R& J% G' `  g    },
    handleDelete: function(index) {
5 d( C0 {2 [  D7 S+ J2 I" B      this.List.splice(index, 1);
' c* s5 e6 b+ [2 r5 X; E1 h    }
  }
! F3 \, n  f9 ^! }};
</script>
8 Y& A) c) X5 k% @" b
( u& A$ d/ z. B! P


: x0 `6 c! x5 b2 D; y

  I1 K4 A' n2 b# ]( s0 ?  D
<template>
  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
; f+ B" M3 G8 O; N8 j& E' s2 f  p  props: ["content", "index"],
* G+ t/ ^1 Y  p  data: function() {
    return {};
0 M& }" E3 B( j6 u2 j  },
0 w* ^3 u( G6 L( k  methods: {
    deleteItem: function() {
5 |2 `( x# R% L4 W, d' A      this.$emit("delete", this.index);
+ y+ x* s2 s6 i    }
  K- v6 T, g' E; U# e+ O  }
. P0 q) o8 D) O% p1 z( p: C* U  Q: @};
6 v" ^# f1 C$ |) N</script>
$ _3 `+ N" `9 H9 v) h6 b5 @

# p: P( `3 k; F4 ~* ]# b" q
$ o' B. K6 n& a$ s3 c6 E) i$ r