组件方式开发todolist

admin

' M% g5 R2 q) J8 f8 x( M
7 ^- ~# J4 w- C8 d' Z) o

<template>
5 A1 ^0 D6 t3 R, _5 e" ^' ^  <div id="App">
! X0 }8 D" o7 H! ^9 R" v- P    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
3 _8 l: l( w2 u1 v    <ul>
! }8 y- ^5 @4 n* B+ `) N+ y      <todoItem
        v-for="(item,index) in List"
! I  u* D5 U( {& c; L& i        :key="index"
        :content="item"
' C+ r+ ?7 N3 g* H) S        :index="index"
8 E7 H; \( Q- c' r9 C        @delete="handleDelete"
      ></todoItem>
8 ^# m- [& u% N5 L9 W) W1 n    </ul>
1 ^" V* s3 V9 Y1 L1 [: Q9 z& @2 d  </div>
</template>

( A/ ?' b5 g& y/ T- F7 N, p1 _8 G<script>
import todoItem from "@/components/item.vue";

+ C1 T0 G! J$ S8 |/ f- Kexport default {
  data: function() {
. ~4 R& a$ v9 C    return {
7 ?3 R' |8 g/ p, k) @( @! o7 f      List: [],
7 y; L3 W9 _- L4 R; s& I" a      inputValue: ""
- f, y5 G% a/ f    };
  },
: P% z- C! _" T, Y1 |2 j/ Y  components: {
    todoItem
  },
& F+ J, b; f4 d5 x( }3 W' d  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  ^) Y7 }* E  e9 a- ]. v  }
0 t- ~0 J; ], v9 C};
</script>

# P( |& O& @$ w) L

5 _# h- N5 o$ p8 c& @) c. N
6 z: r) _4 c$ F% }- N; v0 i1 v

, i, D( c; [$ z% z# o" x. c; z. @& A, `
. W6 T9 a4 E# U% {4 @* ]  {0 x<template>
  <li @click="deleteItem">{{content}}</li>
& J3 w) G) d( D$ d</template>

4 M' U0 q) _  g+ k<script>
export default {
  props: ["content", "index"],
( n& K9 t- P5 L  data: function() {
/ V0 h7 r2 N, e. v' c% w% h    return {};
  },
  methods: {
& X) h; Z3 c4 ~8 I' w; c/ I. w4 ~    deleteItem: function() {
      this.$emit("delete", this.index);
- |7 {! ^7 s# ~3 A$ i: p    }
  }
};
</script>

+ Q' Y/ Z' v) ^- f6 V/ b