组件方式开发todolist

admin

" J- l* w' x3 h) {2 C* A/ C  j' i
1 P6 Q6 M+ {- f9 s3 C3 g. @

<template>
! l0 p% V/ f  h" k  <div id="App">
9 d, _, Z$ s5 C7 C! k! X    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
9 v1 d8 e$ }% Y      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
- u  l/ N$ o" F8 L' m8 h        :index="index"
. e$ @( U, ^, s. q) X        @delete="handleDelete"
/ i- N3 z5 j" U) M      ></todoItem>
+ e$ b: R# `( x# I% S8 Y    </ul>
  </div>
  Z( a% A/ z3 m& e* I</template>

* T/ Y& g( Q, [" b5 p<script>
import todoItem from "@/components/item.vue";

) L% _( {" R# @/ cexport default {
  data: function() {
    return {
      List: [],
+ h! w2 g, K- X      inputValue: ""
    };
  },
2 |( u% m# K8 u& z8 E1 |  components: {
    todoItem
6 C1 w7 l; W' e$ ^: b7 Y4 U4 W" E  },
) N5 C. e. v1 e  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
; k. ?- ?" N/ O; T. b# J9 f) l      this.inputValue = "";
    },
    handleDelete: function(index) {
" S: S1 `) [# X1 `0 H6 p      this.List.splice(index, 1);
! L( R" ^6 Z; x( c/ B    }
6 J0 Y, j  Q- C: Y  }
0 r+ o; \1 s1 X  f};
</script>
# h; ^  ?! a# A( x

& |; d& c  h4 M6 H



3 J* ?0 c% B8 d. [4 P
<template>
  <li @click="deleteItem">{{content}}</li>
3 z2 }% q* c/ Q; {2 t# y</template>
' {, _& m1 G8 A% F5 \
  P- j0 a7 Y4 d: h9 V<script>
export default {
$ R/ o9 O8 {" U  props: ["content", "index"],
  data: function() {
% f6 \$ v: ?$ r  n9 U8 r    return {};
  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
. A9 t* r, g0 l+ o3 x; u& o6 W    }
- h  O9 y9 o2 S  a8 \+ O  }
  g- \1 N, b# P0 I2 c4 T4 m};
$ A; U2 I) g1 }0 ]0 i</script>



) d) ?/ J4 m8 J
/ r5 c6 [4 r" ?- I) }0 ~! N4 k5 A2 s" r