组件方式开发todolist

admin

* c3 X; \' O: y% u/ s


, D6 p( ~( ]7 d7 ~. ~( g2 {' ]<template>
  <div id="App">
* l0 W( R1 r# [" M: x9 Y% e/ d    <input v-model="inputValue" />
+ ^" b+ {8 @8 F; e. `: L) e) \    <button @click="submit">Submit</button>
    <ul>
      <todoItem
/ D/ y0 ]0 a! G" k5 \$ B# h        v-for="(item,index) in List"
        :key="index"
        :content="item"
! `( C: |% [; P# o6 G2 r        :index="index"
        @delete="handleDelete"
      ></todoItem>
, ?. p9 E+ T% Y7 @9 Q2 B( I8 M    </ul>
& j, T1 `0 Z6 O/ R3 y: Y  </div>
</template>
2 c. n- `2 a- v. k: B% O
" w5 @6 w7 w( X. E<script>
import todoItem from "@/components/item.vue";

( Z1 m0 k5 R% ]1 a7 Y$ d* r' iexport default {
  data: function() {
5 J' L% Z# \& W* t+ n- j5 D4 `7 `    return {
      List: [],
      inputValue: ""
3 t, F2 p$ c- W    };
9 b( c( F0 _. O  f  },
  components: {
6 @8 F, n" x6 W; B: c    todoItem
  },
  methods: {
1 x3 o) G& c$ Q* t    submit: function() {
5 k# G$ e0 J0 T! g      if (this.inputValue != "") {
/ \9 f  k6 {$ I2 s9 ?. B  i2 T2 C2 X        this.List.push(this.inputValue);
% ]% @' l/ b; D  v2 D      }
: ]2 L, j  a$ A3 \      this.inputValue = "";
    },
8 F6 ^% B. v* s% T- Z* O    handleDelete: function(index) {
9 C  h2 S/ I3 S* T( q+ g# N: @      this.List.splice(index, 1);
' ?! E- u  t, i4 E2 ]% b    }
  }
};
</script>

# s6 ]% T# _- g2 D6 |: K

+ Q# [2 h, }& |" W( Q



<template>
  <li @click="deleteItem">{{content}}</li>
</template>
! e6 S" g$ k" g% x- U: T* z) s8 M
" F* s. N& L+ C* o/ A; I, j) Q<script>
export default {
  z$ k0 m4 c( y# h  props: ["content", "index"],
5 {8 s0 J0 V8 i- o8 o  data: function() {
    return {};
( J$ k) Z3 ?& c9 W# x, B5 E  },
  methods: {
    deleteItem: function() {
$ v" [5 L3 a7 V5 Z4 W# [      this.$emit("delete", this.index);
  T+ ~: [9 ~( d) ?$ g% d    }
  }
};
</script>

: c7 [# p1 ^: U

2 Z1 t5 s1 z" ^5 C
+ o) D* j1 F! p1 E  R