组件方式开发todolist

admin

' J0 A7 [0 d, o( ?2 e" O3 n

, f8 Q; o% V+ o% {4 D<template>
# e) v6 Q: L/ U6 ]% U  <div id="App">
0 |# H, }+ r+ ?* q0 V    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
: y8 d3 C! z7 u$ Q' H* r    <ul>
+ D, T: u4 g2 k$ r+ E6 z; C' z      <todoItem
1 v$ M. d1 T; e7 t& M( U# y( Z        v-for="(item,index) in List"
9 Q7 J2 X6 v3 M( ?/ \        :key="index"
        :content="item"
8 x, J2 Z& T; T  z; w5 H        :index="index"
' B8 |+ [( \5 r2 m        @delete="handleDelete"
: _. C' A/ v- e      ></todoItem>
    </ul>
  </div>
6 j4 S  \6 h% }0 T9 K</template>
, e1 y8 S4 x# ^( n$ A
) K* u& o1 |2 I6 i, w  j0 _<script>
import todoItem from "@/components/item.vue";

8 D+ Q! P; P! E3 @: Zexport default {
  data: function() {
6 Y: J3 G5 [+ i  W    return {
7 k) |3 W0 S3 p% A' ^( Y, E      List: [],
      inputValue: ""
    };
  },
9 S4 i9 q3 C, c  components: {
    todoItem
  },
  methods: {
    submit: function() {
$ \' M: V; D, }. K% g) ~/ ~- k      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
  o- r( H+ q: L1 a: Z( p' ?" q    handleDelete: function(index) {
, z; y, V( `' o  |" ~# G8 w      this.List.splice(index, 1);
: i5 x; k0 }" C! x; k! g0 ^    }
  }
9 p+ v- {) C2 y  C};
</script>

. h$ Z; r/ ?8 {: C& q
/ b( p6 e) l8 A" p" i* f. Q
4 t' W% D' n. P+ ?+ O4 t


) s- q7 F8 H: S" J8 x9 {
<template>
  <li @click="deleteItem">{{content}}</li>
</template>
5 r" R( z+ y5 x& Y
9 \8 \1 k* r; A2 @- b% A0 j# E<script>
export default {
# l2 `- x8 Z4 k7 t- B: m0 L  props: ["content", "index"],
  data: function() {
# ~) }5 X0 O7 s" v( r    return {};
! t! c2 Q) k2 d# Q; t  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
- Y: @; J) T9 }- j    }
+ D% j/ r/ k1 J! ?$ ^  }
};
</script>

- ?% o/ F, f& x4 ~6 `  f

" w8 J1 V& ~! V, z  Z0 }  n
+ n/ C$ s# K7 E' ~# [8 i