组件方式开发todolist

admin

5 `" j5 U0 R1 j6 c4 f& W
<template>
" y6 ?+ Y" q1 |  <div id="App">
    <input v-model="inputValue" />
. `3 N5 o+ A; G- ?    <button @click="submit">Submit</button>
2 \- k! J! Q' w+ B7 B% ~    <ul>
! Z2 t& K9 \8 d7 t2 |( A      <todoItem
        v-for="(item,index) in List"
7 v# f9 n& g6 P4 ~) @        :key="index"
" o# G& c; u% |3 V1 [! B        :content="item"
1 Z* }. S/ U( f1 i/ E1 v" p        :index="index"
( E: B. i9 s* ]        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
/ `* E; }, [$ c; o4 H  {& D6 H* O</template>

/ H! S6 O( F% P; J<script>
( }- n# V! v; ^  X# p: Q( ~import todoItem from "@/components/item.vue";
# z- e# p$ O4 P/ A& G
7 S7 B( n- K. t5 P' z& }( yexport default {
  data: function() {
    return {
9 s) q+ D6 \3 R4 U' O! C      List: [],
0 n2 W0 s! n8 ?' S: P      inputValue: ""
    };
  },
2 n' S2 R9 i- y4 k  components: {
    todoItem
  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
) }. G: ~1 J) K      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
* b+ P0 D8 d$ B9 M8 Q  }
};
</script>




5 G+ V3 s& ?7 Z( y7 D

+ W& K  ^: w$ u  b8 @
# b& k5 A% a  R- o# L<template>
- u0 C4 L- I$ {! _  <li @click="deleteItem">{{content}}</li>
</template>
; D1 y, d+ M1 q% p" z0 y+ ?7 P9 h
: G' X" |; i3 l) F# C8 s<script>
2 M* M/ R9 _6 |5 Sexport default {
  props: ["content", "index"],
3 y" M) {5 \; c0 s9 t6 \& Q  data: function() {
    return {};
  },
  methods: {
' [# {, S& K/ s3 k4 S6 ?8 O    deleteItem: function() {
; z& X: J4 ?  I. l1 I      this.$emit("delete", this.index);
    }
  }
7 B) O/ V+ v" `3 N: Z};
</script>

5 ~. Y5 g; \# U! b) @  @& B9 B
4 D7 E) l3 D0 c. a