组件方式开发todolist

admin

4 t* A$ _# N4 m2 h, j" c. u
6 \& H% y& S' n
* Y$ N9 s  m, b9 H0 M8 t; [
<template>
6 F; y4 m( y& z  <div id="App">
6 y  G+ [: O# y# F4 L- U    <input v-model="inputValue" />
( e+ e! I! K2 X) S    <button @click="submit">Submit</button>
, O! b: v7 m% j- j    <ul>
: n2 h& F! c) Z! e6 F  t2 L2 v/ H      <todoItem
  O. |( u3 C( b/ `( R        v-for="(item,index) in List"
* r0 J, s6 t- ~' j        :key="index"
        :content="item"
        :index="index"
; w1 f; ?2 J' Z. l, @        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
</template>
, L6 A1 o) S- L7 ~( i3 }" Z% j
<script>
% ?" N! S( ?6 ]" W. ^. g% _import todoItem from "@/components/item.vue";

export default {
  data: function() {
, B% l/ d% O; ?# u+ g6 R: v: i    return {
8 }  \3 \: D/ L/ h4 j% j6 o      List: [],
      inputValue: ""
' A" D& m( C0 a    };
  },
; ~6 `& N. G! F! M. r* m: s  components: {
: n$ F) T/ d) K" S& _1 r    todoItem
  },
0 n. q- u- _4 C9 X; W3 z2 U  methods: {
    submit: function() {
2 l1 ?4 F. M( z' I      if (this.inputValue != "") {
9 m, {* Z0 \8 s, t% ?( l        this.List.push(this.inputValue);
      }
; }: R$ o8 R2 ~# {$ a4 w      this.inputValue = "";
- d* o" {  _5 f4 n4 x) T/ ?4 m# ]    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
4 V0 M/ e1 ~3 l0 S. p4 l, ?};
</script>
0 v7 b4 Z4 y! j6 M% h( o. y8 P
& K' y4 n* J9 O- x% @* n  g
6 f  f: f1 A5 D1 p/ R
+ d& f" q6 W* B3 z8 `9 \$ P
  W, ?1 a3 _4 a5 Z3 B% ?% i/ b

% O9 e/ r1 L. o5 d5 ^) Y
- d+ ~3 _5 r. h<template>
  <li @click="deleteItem">{{content}}</li>
</template>

) w1 [. O+ X' R( W1 v<script>
0 x+ @% P! \. ~: e0 S* l% zexport default {
3 v- \1 k3 [- z0 R8 H  props: ["content", "index"],
  data: function() {
- {% r/ M$ n# L0 `5 i    return {};
* U7 i* }/ d2 }$ i  },
  methods: {
' S% A* x! c3 G4 }$ G    deleteItem: function() {
, P) i7 H1 _+ {5 m$ |, P, ]      this.$emit("delete", this.index);
* h: m( G$ S+ G    }
  }
1 L+ t, v% e& F# V};
+ E- J$ e1 o! i% N$ e/ X</script>

9 J# Q' p! X7 B
8 M/ |1 N9 @! y% ^, B
6 F7 N) X* w& l. v% T3 ]5 u