组件方式开发todolist

admin

1 F9 d; ~: g4 K3 M- u; E

* X8 y1 W3 f2 {  D
<template>
4 n1 p0 ]5 _: [9 H% U  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
$ ?" {+ Q# H6 o' N2 Q1 X4 c      <todoItem
, ~, q9 ~- h0 z5 `' X: C' A        v-for="(item,index) in List"
        :key="index"
& k' Y6 `8 k9 q4 r# c+ k+ c7 n        :content="item"
        :index="index"
' T0 n' r8 m) j* t0 z        @delete="handleDelete"
( o* H- M& j2 d' E8 ^      ></todoItem>
    </ul>
  </div>
* \8 K" `5 K7 \</template>

<script>
# d* t% p# I% R3 C7 d' |8 B6 Himport todoItem from "@/components/item.vue";

export default {
  data: function() {
0 K  @4 @* h$ x" E    return {
      List: [],
! r" D7 K- G3 g& I$ R9 f      inputValue: ""
! l5 }; `# g2 @& b    };
  },
4 u0 _% S8 |1 _8 i5 @$ y  components: {
    todoItem
: \! A+ t! L6 y1 b1 R0 p( v  },
- U9 V, r: M9 V  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
5 }. R6 I5 s0 ?9 a: w      this.inputValue = "";
3 r2 g! l/ _9 v  e  U8 |' f    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
" E! B& Z1 y1 w* N    }
  }
};
8 d  u+ m7 A  D8 K% m; y* j</script>
/ D4 `$ O7 W8 D! E1 G

& C/ E- |% g1 G% d5 c2 ~" S: @/ e8 f, I
0 z5 g. ?9 K4 z4 F4 E

, [% A8 z. i# B& _8 T* b" L: p0 U
+ L9 ~" w6 P; n2 F; i
) k0 e- r" F! {, f& S' H<template>
" Z4 C* }/ K0 [2 [" E1 s  <li @click="deleteItem">{{content}}</li>
9 M+ K8 A3 v# |/ N& ?</template>

+ n+ Q) y4 }( @  N+ H<script>
export default {
3 c9 g$ Q- j; M, M; |  props: ["content", "index"],
; G, f, x) R% X' N3 i, Z  data: function() {
    return {};
/ F5 q9 q" u2 I3 Z- n0 f  },
  methods: {
    deleteItem: function() {
8 |& A, w: m/ a/ K* Y5 W3 G" `1 e      this.$emit("delete", this.index);
- ~" f2 W( X; u: D/ }" e    }
  }
};
0 s% |7 U( e) b0 H5 U</script>
4 ]2 ]. [+ ]; V5 w! m
1 y' Z0 H# Z* m9 F
8 g" F) I. f' |3 @