组件方式开发todolist

admin

<template>
  <div id="App">
! p9 b+ h. a) G5 C) i3 e    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
& V" n* r5 `$ R9 K        :content="item"
: q! a' M' q5 ~        :index="index"
        @delete="handleDelete"
! V+ t, `% D! z7 k- M+ `) a      ></todoItem>
    </ul>
  </div>
</template>
- w# l; @6 G" Y6 ?
) }% G( V3 A! O2 q<script>
import todoItem from "@/components/item.vue";

export default {
# Q/ x# E0 f* y0 I1 S" j3 I; w  data: function() {
9 {! V! D  n4 P1 h0 @7 Y! A    return {
      List: [],
      inputValue: ""
/ E% l9 g5 n: U0 e8 u: O5 C    };
  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
; B0 c0 S( I; ^: _      if (this.inputValue != "") {
        this.List.push(this.inputValue);
% g0 @# y2 v  _1 |" _4 K      }
' a6 i" l) s9 v7 C      this.inputValue = "";
2 z; O" P3 z, p, p2 F    },
( S- {3 p9 _6 A; c7 s# u    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
  G5 s' n6 a! w! ?: T1 o0 O0 J+ F};
</script>


# {( z5 `7 H- h& v
. D8 {, n" _7 r" d5 ]7 h. k( r* o



<template>
9 U  ^0 ]) S9 ~2 k  N/ X  <li @click="deleteItem">{{content}}</li>
7 o; y  i* ]$ {+ P6 C; ?' J</template>
/ B! Q% x6 I( F
4 E" `( J3 T1 ?! b, z  c<script>
; l7 J8 ^% @' M; j+ Q- m5 U/ M9 Mexport default {
4 @2 v8 R5 k3 m; N& ~* @- o. s1 r  props: ["content", "index"],
  data: function() {
    return {};
. _# P, l/ u  e0 ^4 N9 X; U  },
  methods: {
- \9 A+ Z/ Z& k; ~    deleteItem: function() {
  c4 S" `3 o" W      this.$emit("delete", this.index);
: u; ^3 \5 W, S. ]" i+ B, i* g$ h4 L    }
  }
1 {  b/ I2 ]1 d1 |};
</script>


9 Y" ?# r0 V4 N$ b7 \. i

$ n6 t# R4 M; O