组件方式开发todolist

admin

! H" _" q# E& h+ ]/ ~) z9 j1 j


<template>
  <div id="App">
3 I2 N+ f. @" L( v; Z8 R/ K1 `    <input v-model="inputValue" />
, }# A' h( |  q5 o    <button @click="submit">Submit</button>
    <ul>
      <todoItem
1 }# ~! F' m( x4 H7 T3 ]        v-for="(item,index) in List"
        :key="index"
  E5 q8 w8 p4 c7 V% s& g. H        :content="item"
        :index="index"
        @delete="handleDelete"
7 V1 l" v0 K# D9 v      ></todoItem>
    </ul>
  </div>
. _# I: A0 N3 Z  j$ {0 ^( m& o</template>
% C2 e* W( \% ^; U
( h9 c; Y3 L9 u8 A7 ^- l<script>
import todoItem from "@/components/item.vue";
+ j( p, [( j. R. p/ ~: G
0 M  r$ P6 g! P# O" U' v, |export default {
  data: function() {
6 i' w  a) F# b    return {
' x8 @' [- F, Z3 @      List: [],
: H  O- O# O- Y- P      inputValue: ""
    };
' [+ O7 w8 c1 D& U6 u  },
  components: {
    todoItem
2 k# d' x# K+ \& s6 y6 E  },
  methods: {
    submit: function() {
3 j* G1 c, V4 j4 ~! b# r( S1 n      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
0 g" {) K+ L* \  l- x      this.inputValue = "";
6 H" j# R( Y7 f1 ]7 C    },
& _  f4 P5 o0 b: L! l- t    handleDelete: function(index) {
      this.List.splice(index, 1);
# F1 |/ q3 Z. ^# k    }
  }
; X  I2 T8 ^& f- @};
</script>

+ f, G6 W3 l: t4 F+ q% ^
3 E4 f9 n9 [! A2 R
/ F. p9 N9 t! u1 T
3 ~8 F$ I( ~7 R6 x- X, m0 ^
5 g; {/ r5 M4 d4 |, S) [! F
) I! I1 i. s, e
$ g$ o1 `- x1 c1 _& O/ Y+ [3 W; j<template>
  O& Z$ e' w( F' a% x' I  <li @click="deleteItem">{{content}}</li>
</template>

<script>
6 M) p1 q; y: d, a9 K5 Lexport default {
  props: ["content", "index"],
  data: function() {
3 q8 \1 o) F1 b- k2 z3 W  z/ R    return {};
/ @0 Y: T- t* }4 a  },
  methods: {
4 V  N6 V  q4 t: ]; m    deleteItem: function() {
      this.$emit("delete", this.index);
7 [7 t( ~! d6 F% g    }
% w; \  ?. |  [& g$ B( T1 l  }
8 z8 _5 A; Z5 ?};
+ }6 p; h$ x( i$ h</script>
* i+ P5 F" F4 a6 }

6 |; o. B8 `" ~$ m: ^  x* l5 Z% l0 c