组件方式开发todolist

admin

- X& ?3 }7 i2 {( _3 A8 p. A
. L* E; F  o" c7 ^  S1 A, g& s
0 S$ s. F# @. @0 f2 f# e3 n' m
  w- i1 [8 i* p1 E& p<template>
  <div id="App">
* a5 Y4 Q" C  Z+ c. L    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
% W1 K# H7 x. i& J7 N    <ul>
      <todoItem
7 M5 H5 \1 R. Q: }9 C        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
9 ~' T# m, e. _0 m8 f; X4 r        @delete="handleDelete"
      ></todoItem>
& ]- H% E2 T9 z7 r7 M) k) z    </ul>
  </div>
</template>
: c+ ^9 B2 |2 p  n
' V: i! G9 `5 w<script>
( Z/ s9 J! j7 x) [# \* rimport todoItem from "@/components/item.vue";
6 [/ ~( y+ ~0 |4 W0 f& X# J
* G8 \1 h+ y4 Dexport default {
  data: function() {
+ `) D' J1 f: v" o- p    return {
      List: [],
& m0 J" i2 Y3 \7 ]      inputValue: ""
    };
3 H) s, X8 s4 N4 X4 a+ a3 w7 M$ x* E  },
  i+ g+ V3 B3 @" m4 O3 \  components: {
' F; b4 g$ K, O# K& b+ v) E    todoItem
  },
  methods: {
$ S5 V- u4 F0 m1 p9 q    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
, X7 ^: ~, N. B. K4 k! Q* I      this.inputValue = "";
    },
    handleDelete: function(index) {
* K! l! `  i- I3 u2 u      this.List.splice(index, 1);
    }
, T  w6 [- ]9 R$ [7 N  }
7 p1 ?( a# d; p( n};
</script>
6 x8 E# i% Y/ ]* M/ o


5 i' V: x5 l( v" a1 j

$ G( g2 Z2 s. ?! A: D  ~
+ E9 N3 [; J% P* o7 ?: j
8 q3 t9 i. E- B8 W1 V$ B& \<template>
  <li @click="deleteItem">{{content}}</li>
</template>
, w. j/ U) a& b$ ~& p
<script>
& L. l- y% Q7 D& Bexport default {
  props: ["content", "index"],
  data: function() {
# x7 D  q3 ]- a2 a0 ^: p    return {};
" s( [# J9 e% ^  },
4 Y; U0 e/ ^0 [  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
3 ?- h  J0 o6 ~4 u* e- q% c+ U; B  }
};
</script>
5 q4 a7 x& y" u1 |( A# Z# e8 @

( \" S! ?! b9 n. f9 U6 h9 |: L5 S

. ?  A8 ~9 G- T- v. c# c4 ?