组件方式开发todolist

admin

2 c+ z+ b8 P8 F, V
' v% e* O! O8 E' t+ t# O# p

<template>
0 Z3 q, J; [! C2 `; y) x( s  <div id="App">
5 T( v# l$ W5 |# u9 a    <input v-model="inputValue" />
3 L: {1 T1 [+ m$ q) p    <button @click="submit">Submit</button>
    <ul>
9 S. J+ U. g' @2 D- k. g      <todoItem
        v-for="(item,index) in List"
' M8 `0 J8 [  O/ Q! X        :key="index"
+ P2 j3 x0 o) \5 L7 u" u' {, X+ c% ^( j        :content="item"
        :index="index"
& _* ^+ [2 Q4 G1 K5 I        @delete="handleDelete"
4 o3 e. W$ Q$ \4 d      ></todoItem>
    </ul>
  </div>
</template>

<script>
import todoItem from "@/components/item.vue";

export default {
  data: function() {
# \4 H; Z% o9 ^7 I" i) c    return {
" v7 B, @( u" N! Q1 n      List: [],
      inputValue: ""
    };
  },
; u$ t4 J, D7 x: k0 G. N  components: {
    todoItem
  },
% E- Q3 z4 Q2 k  w; s* m& t  methods: {
    submit: function() {
* }/ O3 e8 s2 v      if (this.inputValue != "") {
        this.List.push(this.inputValue);
8 M! i8 `1 O1 \3 H0 W      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
7 N) a- e7 y9 [$ k) y% h      this.List.splice(index, 1);
    }
$ n" F4 }! z$ K  }
};
</script>




1 Z. u" N4 K$ Q# T( g2 |
; g  k/ z: B9 z

<template>
( k$ e1 T8 E# H  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
  props: ["content", "index"],
3 q/ p4 _4 q9 {& a3 O- ^# b$ F. E  data: function() {
5 E* o& F6 H1 T3 |, ?0 \: w3 a, p    return {};
  },
  H4 G0 ~) X# b- c+ y; V  methods: {
    deleteItem: function() {
  W4 T0 [5 d0 y+ O, _  o: ?5 m" Y* x      this.$emit("delete", this.index);
; m- m% k) A2 v# `; [    }
! @; |2 I! h# j! D7 e  }
};
2 J7 O% Z' g( z. W' h( d</script>


! d" P6 _" a7 I% A  w+ W
& E; y3 H; ]0 F& Z" G
4 {" ~( \0 |) n& M