组件方式开发todolist

admin

/ w: e+ R4 s: z: u7 l9 Y, \

& H6 A' b- p; N<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
1 u& H; _: K- j& c, a/ g  F( V    <ul>
      <todoItem
, U; y, u% a5 g        v-for="(item,index) in List"
' {6 t: |. B2 i5 Z! @' j  c        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
  p: Q- B* c/ |, c& X" n  </div>
: l" b( ]! S, K9 b7 U: n  X. r</template>

- T/ t" ~" X$ ]<script>
import todoItem from "@/components/item.vue";
: z$ v' U/ a' ~8 D9 X
export default {
, M$ {/ q4 E7 J8 ]  data: function() {
) R- w5 t! E+ G* Y" g    return {
; I, `' y7 T! k4 ^) v# ^      List: [],
% \* n. \2 }" p      inputValue: ""
    };
. H+ D5 l3 [% S- E+ ]  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
; g- O4 B# T7 }# y      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
' H4 h! D" ?) V) H1 O0 |4 A9 H      this.inputValue = "";
! k; J4 E3 g4 t    },
- ^6 F! A* o  V3 V, J3 s7 @( N    handleDelete: function(index) {
0 e0 p* y( {9 J% y      this.List.splice(index, 1);
    }
5 s/ F* D0 c0 I: D  }
  u/ J0 `, A7 l9 I) H' }5 J};
</script>
/ }% z8 Q0 V) B" x
7 p7 }; V' z! d  h
0 H4 M8 n( v" l8 G4 @3 V9 @) e9 y
- f! F" i9 T3 e/ Z5 m



<template>
. V" n' ]+ V0 h4 J2 M7 d0 N  <li @click="deleteItem">{{content}}</li>
2 j- R+ I  s, A. I</template>

" K% b' J) g, [# @<script>
export default {
5 t) S5 m( D0 j3 y  props: ["content", "index"],
  data: function() {
    return {};
  },
0 q' W# P5 q' ~7 s% ^3 ~  methods: {
2 q+ k! b; t" a5 b3 d    deleteItem: function() {
      this.$emit("delete", this.index);
1 o* M& b/ r# g: _4 |0 [& U' q    }
4 l# }2 ]: T# q# ]3 D  }
};
</script>


# M4 B9 [- e0 n; F

3 _0 Q1 B/ `) P1 c& \* X