组件方式开发todolist

admin

4 V) L* S: J8 {0 ?& u' {


<template>
5 r( Z2 W! K2 {) R# l  <div id="App">
    <input v-model="inputValue" />
' Q! ?. J; h* X    <button @click="submit">Submit</button>
    <ul>
. G! C$ ~/ e- J! D: b      <todoItem
9 H" O7 Y# ^! R0 |; r        v-for="(item,index) in List"
        :key="index"
        :content="item"
& K" [8 B" F# M$ e; w. E  r        :index="index"
        @delete="handleDelete"
      ></todoItem>
4 r* @  l' O6 c9 ?' g/ c5 j    </ul>
/ H) {) `* a+ y# J/ v  </div>
</template>

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

+ V. F) E" Y  y& P! i2 Wexport default {
  data: function() {
! X5 h1 i2 p9 U$ w    return {
      List: [],
      inputValue: ""
( O) ]3 @0 k, c$ h( v( ^5 t8 D    };
0 d$ q: ]+ @" L+ v. k  },
  components: {
    todoItem
; ?7 t# o8 v% k0 D6 ~0 S4 ~0 P. P  },
  methods: {
    submit: function() {
3 O# K' h5 L/ U; _& @4 t+ n4 E3 c      if (this.inputValue != "") {
        this.List.push(this.inputValue);
0 X, v$ ?7 b. T0 f% u  T: I* r      }
      this.inputValue = "";
2 R* T" I+ U7 Z    },
    handleDelete: function(index) {
* H7 f* f: Q; D/ }% V4 n0 W      this.List.splice(index, 1);
6 J9 J( q0 y4 i0 u1 Y9 K. k    }
  }
6 _- H4 E, X. L};
</script>
% l. Z" I2 t$ x' f
( ?2 B7 M1 j6 x+ V- |4 R
: T! g+ U. g8 p" K- e( ^4 t2 V
5 U; t% t) C. w$ R; g9 C# w

. ^! K! X" B7 E8 ~! z* h' b

<template>
; v9 x9 S3 N7 g+ h6 Q! j, X4 }, }  <li @click="deleteItem">{{content}}</li>
</template>
9 J" x1 f' T1 J0 f
) g0 o6 M# k  d1 |- Q<script>
export default {
  props: ["content", "index"],
  data: function() {
$ R7 W0 c" |$ T/ s2 e6 ?8 {9 [, ?    return {};
  },
- y; `  W, V: c5 e9 g: b) M  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
0 ^% L4 J" z- t9 d4 e, Q  }
: D! N+ e# q" [$ z};
</script>
7 I3 w( Z8 U3 ?
2 C* L$ d2 P9 d- Q