组件方式开发todolist

admin

' V% H' p) E0 T


<template>
: p0 U8 `' I* F3 E  <div id="App">
( L8 K( L" x& D: {- t    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
9 y" d( i3 J6 Y* H$ X8 u    <ul>
      <todoItem
2 N/ ]7 C. Z' O. B0 f& v3 G        v-for="(item,index) in List"
8 p( o& c3 K+ J$ G0 t        :key="index"
5 b2 E7 R1 q  F& J5 ]& x5 N* u4 |        :content="item"
! N& G/ O% Y5 g. P/ |# @        :index="index"
        @delete="handleDelete"
2 n- Z7 y. ]( v# `1 @( i      ></todoItem>
    </ul>
& L2 i" x' @1 P0 O  </div>
$ l' s( O9 [+ A! Y4 L3 ]1 x; |9 b</template>
0 r" _" B5 |; d# v3 v7 R* I" @8 ]
1 u+ c2 N7 H6 ]2 O<script>
import todoItem from "@/components/item.vue";
5 w$ ]6 ^8 l* }  R; D
. e* _( z* g( y5 Lexport default {
  data: function() {
    return {
3 r& }7 K  x) e) K$ V      List: [],
9 A1 @, {$ Z/ C% N* p9 x2 H      inputValue: ""
    };
  I3 ]1 P. N, Q% q' l: g  },
  components: {
6 q3 T" ]. J, j    todoItem
  },
  methods: {
% k  j. f2 O' i& w    submit: function() {
3 ~/ _) g% N  h- F4 ?" n      if (this.inputValue != "") {
        this.List.push(this.inputValue);
: f3 @9 v; y5 @8 E  a. p: d) Y      }
4 a4 K3 C6 {. n' y7 {      this.inputValue = "";
    },
& C. o$ D& M" w$ c: R& n- f    handleDelete: function(index) {
+ T  {; C" L5 o( Z. A2 [      this.List.splice(index, 1);
    }
: F1 ]( M: D6 O5 Y# G9 p  }
};
</script>

; G# r: i; Q; s% s$ U" e& o



& d4 j8 K; ~0 ^$ U% }
1 n4 g" ~- L$ j
<template>
  <li @click="deleteItem">{{content}}</li>
5 T- K, g- f( O3 Q" h8 M</template>
0 [9 l( x( a0 Q4 Q7 [# {2 `
<script>
  f3 |- V9 n0 F$ E& _export default {
4 z5 l& S# l9 F, X9 B  props: ["content", "index"],
+ o9 y1 T" P8 |4 X  data: function() {
    return {};
' q2 V. m/ @3 j" }$ O0 w0 ?0 ]+ q  },
! O4 [8 L6 f! T) C  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
- N: U* p3 X+ X7 I) s  }
& }! r. f1 N% v3 u};
</script>
' u: ]/ u; V( I
9 D* K0 J' F4 Y" x. e2 y2 c
: g3 U* \& c$ ]; H! x$ o! R& F