组件方式开发todolist

admin

& Y- i( E/ ?6 `9 M- K! d& F3 h7 n
! n& A% r% r9 s5 B+ [" `. s

+ \* z' t+ [# E7 Z4 l<template>
8 J6 Y, r( W8 l5 E  l( C, H% c  <div id="App">
    <input v-model="inputValue" />
) M1 t1 O3 C( z- m8 g- ]% Y    <button @click="submit">Submit</button>
    <ul>
      <todoItem
7 O6 f/ a7 \: k$ y        v-for="(item,index) in List"
) n+ c/ a0 Y3 Z$ n4 f2 f8 T0 v        :key="index"
4 q. v) K. f" y. {" J7 S        :content="item"
4 ?1 M" v, o! F4 Q" k        :index="index"
$ M1 L+ C# C2 a; B9 J4 w% p% W        @delete="handleDelete"
      ></todoItem>
# w3 [+ f" y' J    </ul>
  </div>
</template>
2 Q1 a9 n! e  E* L
<script>
import todoItem from "@/components/item.vue";
  O8 t, l( ?* [; e$ U
+ Q6 R% w# b. u- N, w* i2 N1 e3 `! \export default {
  data: function() {
    return {
      List: [],
      inputValue: ""
( f( O+ E3 F4 \, N) [4 I    };
  },
  components: {
    todoItem
$ D1 V! O0 D% k$ u6 V0 t# o7 ^  },
8 w! R0 S4 Q1 c9 t& q  methods: {
    submit: function() {
, e! I% h) @$ N* i* E& j2 L      if (this.inputValue != "") {
- B6 l5 v% }6 ?        this.List.push(this.inputValue);
7 }1 v( g/ u# _5 g# u      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
' q& e# A. ]1 W& M6 u      this.List.splice(index, 1);
/ ~& C0 O& B$ J    }
$ K9 }$ j9 o& @) v0 d  }
};
3 I) }9 n8 X# ?' J2 w& s</script>
$ Q, {0 M/ b# l# ~; U3 w
5 {* J: l2 J; ?. v6 ~
. ^$ P5 z6 T/ i, z3 c2 ?


7 s4 F/ V) J9 X

<template>
  <li @click="deleteItem">{{content}}</li>
</template>
. }/ J. ], B" ?8 z* a
<script>
export default {
9 `' }) y9 ]8 I$ U  props: ["content", "index"],
( O2 k- a4 Q) {5 ~9 z/ c5 I  data: function() {
    return {};
! y, f/ n4 `; n4 z' G  j  },
  methods: {
% L: i6 o3 h) \8 {' U3 o    deleteItem: function() {
      this.$emit("delete", this.index);
    }
) {8 I! t$ K7 h- p& G  }
! S- ?" @; W( O0 b};
  M. O$ p6 N9 Q5 t! q</script>

2 p$ \& F2 o  q: O9 _

% z" v+ i, a; u* I% f) l! I