组件方式开发todolist

admin

& [  Y( Z& s' m
5 N5 q0 L) u" I
<template>
! S  K, m; v- {; p# J; P8 s  <div id="App">
, g, u4 q$ A7 f9 F$ L/ ^    <input v-model="inputValue" />
- t5 ?4 N* v# U: U9 E: q    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
$ K/ e/ `9 m) W* b* k        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
/ S1 Y/ }3 W) Q1 w      ></todoItem>
    </ul>
8 u* y  \- }) l  </div>
  [3 m" {2 f1 C- I% Y5 H% C% ~</template>
$ M, V# W% \2 a1 E
, N$ A) Q: J$ j. b% g' Y" j1 a<script>
/ @: M" M% Q8 j0 t: Gimport todoItem from "@/components/item.vue";

export default {
) Q, y8 d# \& g; ?. D$ E) Z  data: function() {
    return {
* U5 P5 K8 {: |) `- N      List: [],
      inputValue: ""
, _( h0 f( W2 p2 H1 }4 V: G    };
  },
  components: {
3 ^, b! N  ^% v, g3 s9 z    todoItem
7 y7 }5 R! K# ^8 G6 W2 F$ D  },
  methods: {
* \+ E, `- `1 i* i0 W    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
: g/ N+ s8 s- n# e    }
  }
6 e( ~! g* r" c* ?};
6 e: V; b# c) n7 x; O</script>


& v! f2 X& W) C2 s+ O



8 G4 u/ ~( J( {% p' U6 ]# `
<template>
# x  p( N6 z+ @2 w: Z0 L, X  <li @click="deleteItem">{{content}}</li>
</template>

<script>
3 w0 `& L* s1 Sexport default {
  props: ["content", "index"],
  data: function() {
& K2 y. \  D: J& \& c    return {};
" L( n5 ^! S4 I% `1 e; a- \* {9 F  },
6 ]* N# q( t8 b, j$ O' c' \  methods: {
% H$ z" M9 D+ m    deleteItem: function() {
2 L  P- n0 Z2 d8 T      this.$emit("delete", this.index);
    }
  }
9 n' H; }) p: }# ]( A};
</script>



: }3 ?/ u+ J* _