组件方式开发todolist

admin

( ~' e4 r( G$ L: Y
* U+ k0 p; g7 R

<template>
  <div id="App">
    <input v-model="inputValue" />
& V! ]# ~1 d, |1 d8 t( X) Q    <button @click="submit">Submit</button>
    <ul>
3 n/ u  Q5 Q' z# O, H      <todoItem
        v-for="(item,index) in List"
7 h1 z* f* R6 {( o        :key="index"
) u; p! N& W6 Q. n# }5 h        :content="item"
# `* o: k3 L, ~        :index="index"
        @delete="handleDelete"
$ ^* y( p. K- W; A, F0 t. r7 [- j- W' g      ></todoItem>
) v( _. [$ Q, V9 h1 u    </ul>
' k3 I, D: X( X4 C) y, {  </div>
</template>

5 O- P9 x' c+ M) V<script>
import todoItem from "@/components/item.vue";
; E& G8 P5 a- R! A
export default {
* ~' d5 k  M$ B, ]  data: function() {
. {; v8 T7 ~& l! M" @    return {
2 f3 _  \! Q7 W- O1 r      List: [],
' G2 D$ F! e4 V" B5 i* l      inputValue: ""
    };
  },
  components: {
    todoItem
  },
; @: k) ?( |" R* B# m  j9 d% Y  methods: {
    submit: function() {
$ h$ Y* a  Q- }# L" h8 H4 z3 a, h5 P      if (this.inputValue != "") {
) i$ r( v- j# A) W0 Z        this.List.push(this.inputValue);
+ v5 B' c% m/ }7 J. k% d      }
& @' J1 z" V7 K) i, n      this.inputValue = "";
    },
& u! K+ N9 z) W6 w    handleDelete: function(index) {
7 N+ U8 U7 D: v: v3 K: U      this.List.splice(index, 1);
' U$ l( Z9 U' W' ^8 e/ k8 {- |1 M! ]    }
  }
- n! c+ d( e# N2 D/ R};
</script>


8 [1 ~, [6 a5 e# z* Q1 B
0 b7 |4 W5 l2 W" k* S9 x8 ?3 @

5 j6 f! K3 u. s! |; Z6 e! n
% \) n& x0 m. O+ {: F# }
7 b3 b. v8 `# @<template>
  <li @click="deleteItem">{{content}}</li>
4 H' Q- a- Y3 g; ~</template>

<script>
export default {
  props: ["content", "index"],
' n$ I/ C, }* X6 q" u  data: function() {
6 Y8 _' I& B/ n! ^    return {};
' P7 J8 N4 Q) I/ K  },
* }$ k) q& V! [6 ~2 c  methods: {
    deleteItem: function() {
# J- f: ?* j) I9 C      this.$emit("delete", this.index);
+ G( R6 m2 a* K4 q    }
" E& Z! T9 ~3 W% I8 F  ~  }
};
</script>

: G  o  D2 k- K, n& G$ u
  Q4 N' Y, X2 v6 S+ ^4 ^" f