组件方式开发todolist

admin

6 j' G! _' U% l0 ^9 b! r. `! T2 Y
1 J% p* u9 i& k  \0 ~4 V1 g* o9 }

<template>
+ d+ v! A. z8 s9 L; b  <div id="App">
    <input v-model="inputValue" />
8 T7 x; U* Y3 {4 ]2 R2 ?    <button @click="submit">Submit</button>
9 a. \5 ~9 Q9 e- ~# T    <ul>
% y, U& w7 U* }" g0 T% a; x      <todoItem
        v-for="(item,index) in List"
* h2 g9 X$ R2 J( D) N( z4 ]3 Q        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
$ d7 }* b. p: F; n" P% k6 r  </div>
</template>

& `* [4 q8 m7 n9 Y: {<script>
import todoItem from "@/components/item.vue";
8 {- l0 M. w% T" R
3 {& u/ w  i' ~( j  Q' J, dexport default {
  data: function() {
    return {
      List: [],
      inputValue: ""
3 A% e! R# k+ P5 k0 k    };
  },
. t7 J) G  J" W5 _  components: {
    todoItem
% j# {: y" ?. G  },
  methods: {
    submit: function() {
* C# g% N/ d: U4 Y      if (this.inputValue != "") {
        this.List.push(this.inputValue);
3 f+ `6 t7 K; C; R      }
      this.inputValue = "";
    },
) l1 u4 h9 l/ O" [8 U    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
</script>
2 T, i+ g8 K: I6 o2 G+ i
! y: k1 }1 L5 M- U) n
) p# U/ d3 E. b: t' i" u" f$ }# X

* ~" s9 W# P( o( e* B$ y# H


1 ~; `; k0 ?- H( v6 b8 v4 R+ v( P8 |<template>
  <li @click="deleteItem">{{content}}</li>
4 E- j% Q8 p1 p8 w8 m) f& F/ X</template>

<script>
9 O0 R/ N8 X7 x( J& Uexport default {
  props: ["content", "index"],
7 I) L. T, T, R( F  data: function() {
    return {};
  },
  methods: {
    deleteItem: function() {
! v, U) b( ?2 S$ p      this.$emit("delete", this.index);
0 L3 G% v( c- h* `+ L2 C    }
  }
1 o' a6 H5 W$ F1 n* N7 w};
</script>


; J/ @$ [. [* K, }8 _* r