组件方式开发todolist

admin

9 t- k+ `6 Z8 ~5 h7 f

<template>
  <div id="App">
/ R8 o/ C1 M6 d    <input v-model="inputValue" />
( i# }* D% ^7 A. O/ ^& K7 a    <button @click="submit">Submit</button>
7 z+ n- i5 D0 i9 h7 y' O) s    <ul>
0 v" r$ B- U5 e; j- \4 ~      <todoItem
& A3 Q# N! H8 d" f        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
, ~; F  N$ ^2 y  </div>
</template>
5 r# r. @6 O4 `) g7 i4 d4 r% m
* @( m$ ]/ m: X9 _" A<script>
& Q' }( `  I* N* J6 o5 Oimport todoItem from "@/components/item.vue";

export default {
  data: function() {
    return {
      List: [],
      inputValue: ""
    };
  },
) E0 [/ R" w( `/ h0 u' @* F  components: {
    todoItem
: g5 g7 P. d0 }6 _2 k! @% U  },
( R- n* C1 w" f" G8 z( J  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
( |$ E% A6 |' f0 u      }
- v% W9 x) F5 |6 l, q      this.inputValue = "";
8 r" j  @+ @" b& W" r1 I    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
3 k6 R7 I. B: m- r</script>
  D  Q$ v% Y0 B1 @1 A' J. J/ L
; B# S4 m: w( O1 G
  _: G" G* L( |9 V
2 z- w9 T% m& H, {: P' q! X+ O' R' @
9 B: d( `( }8 E+ Z' G) U8 x3 l

# A- v) P  D/ ^. G8 Y9 d% `' ]
% A6 s7 k+ R5 o! w/ _<template>
  <li @click="deleteItem">{{content}}</li>
3 V- v- H4 |) v/ T5 l2 L- s</template>

<script>
export default {
  props: ["content", "index"],
  data: function() {
' [1 E2 r, w+ W. ~% i    return {};
  },
  methods: {
    deleteItem: function() {
0 w8 @& M% _1 M. B6 G' @      this.$emit("delete", this.index);
5 C* [9 I- ?  z/ H, e    }
  }
};
5 }$ N1 r5 U1 t</script>
# d1 r4 _# x! P* H& S0 h8 G1 l