组件方式开发todolist

admin

9 i) X8 z2 m/ J( S4 y# t6 H6 p
- j  D# b* L9 Z& C
<template>
! S2 F- z& s( x1 q5 i# d& k  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
- U( o9 `4 m2 D/ |+ x    <ul>
* x7 E: ?1 i8 G. D$ x  [      <todoItem
" B! Q" r7 j1 }2 W        v-for="(item,index) in List"
* X5 |( g8 I9 i$ R* P) v# [" D  S) N        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
! v+ |, c7 T% S* R$ p3 m5 k! t</template>

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

export default {
' Z) a& M' _9 N  data: function() {
    return {
* r$ D6 B+ J; }+ w3 ^& h  s. t      List: [],
      inputValue: ""
" M1 K( s8 ]  u5 k1 J( S2 I8 w    };
) Z; a5 Z, U- q+ ]5 C, x  },
: Y4 \- d/ r* O" z  components: {
2 L  ~2 E) `" `2 r1 A' X    todoItem
* t' R5 m7 B- p8 D1 r  },
6 x9 s0 d, g4 U( W% y( D& [, o  methods: {
7 s. h! K) n1 e; A: J+ p- D    submit: function() {
* ?3 P+ T0 m2 r! s) k      if (this.inputValue != "") {
        this.List.push(this.inputValue);
& V7 Z* |+ I1 y      }
% ]4 P& U0 ?% r: t7 P- [      this.inputValue = "";
( h* A+ [$ g# N0 f8 t, E    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
3 F9 ]  P5 b3 B. M- R5 x5 q/ @  }
* {: h' M+ V$ g* Z# F* K% L* j};
) {: m& Q2 z$ g6 q9 h+ C</script>



& c, I7 {3 c' W( U

' }" a# L, U( G5 p) \' }0 a
2 |" R& `( Y% i- L
) J7 e9 b6 g" ]; u0 S! o$ N9 E<template>
  <li @click="deleteItem">{{content}}</li>
, g8 |/ E7 _* P* Q' p</template>
; o: J, [/ ]8 O$ T- |3 ^
<script>
export default {
  props: ["content", "index"],
+ J  F7 a4 M0 ~8 J! h" ^; p0 `  data: function() {
& x. W) r1 A# z$ ~- D: x- X; x    return {};
  },
) Y) }8 b. y" J/ @: \( D0 Q+ c  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  i( ?) |0 B6 ~  }
$ C( }$ V- S9 ^};
# h% v1 ]. k1 h# ]2 s: o</script>
& Z4 m5 ^1 ]$ y$ M. H3 ?
+ O4 k# g, C' n  |% Y: ^( N7 p


& Z1 ~) j" P+ d3 p9 N  `: I