组件方式开发todolist

admin

5 s5 q4 Z% T9 ]
! w: s9 _- j- l# F9 [; ]

0 j: x$ s# z2 M6 j7 a7 L<template>
" H0 t3 D. u& g" R) |0 }* b  <div id="App">
    <input v-model="inputValue" />
) i7 h7 \) c) K    <button @click="submit">Submit</button>
# s6 `! l" B2 h2 e2 Q' w5 |% I. n    <ul>
      <todoItem
% g' E6 ]( ~1 h( q( s- E% S. p( C        v-for="(item,index) in List"
# Y+ R  h/ j5 A" z( j' D        :key="index"
- U" s; c/ {7 Z) z9 R5 [+ Q        :content="item"
" Y0 E; n$ h- z! k6 Y        :index="index"
        @delete="handleDelete"
7 f: K& H; ?; [) r5 l* ?2 O8 v      ></todoItem>
' V0 K( N: p2 ~    </ul>
, K- s' o. S$ h4 R4 `" U- V2 I6 f% A  </div>
</template>
3 C; z* X, P+ P7 l2 m6 U" ?
<script>
import todoItem from "@/components/item.vue";

export default {
  data: function() {
    return {
      List: [],
7 g& k' [; i! A8 a' o      inputValue: ""
- a( e4 f" O) L' F1 g( U, G0 j    };
  },
  components: {
    todoItem
  },
" }% Z0 _- E8 ^8 n# r$ i! o  methods: {
    submit: function() {
3 F- S7 ]8 o# }/ M& g! `7 J: }      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
* F( x) W7 I: |    handleDelete: function(index) {
      this.List.splice(index, 1);
* [$ V+ H' E8 Q  [    }
  }
! n- O& N' {: i};
6 t# o0 f/ g7 a; q6 N2 n</script>

2 I7 X- Y9 e5 i8 H2 V0 r


8 k+ O1 X" C4 F/ g


<template>
. Q2 _! B# h" k" W' v  <li @click="deleteItem">{{content}}</li>
</template>
4 Z  D; Y: x# X- C. P
<script>
4 U, _4 G, l6 U/ ?( Z' rexport default {
2 d/ R- K$ @/ A: _  props: ["content", "index"],
: v( z$ v7 @+ [8 s( y- s( v' M% o  data: function() {
; p  R' b  ]8 W( }    return {};
  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
" _7 k1 G8 ]" v+ V4 M    }
  }
};
8 v" a) F" E. w9 s, ]& e</script>
; w' z0 n: |' [2 k



( S4 Y( {1 L3 j6 }* `