组件方式开发todolist

admin

( k0 I% o' r3 L: e' `<template>
5 I8 _2 }& Q7 F0 D  ^7 Y, x  <div id="App">
3 }6 I, g6 u* q) }    <input v-model="inputValue" />
2 T- ?7 I& Q: z% f  _    <button @click="submit">Submit</button>
. s6 H. ]! U6 W! B1 ^( ^    <ul>
. O6 w6 \, z+ E      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
% ?. d! {! x, z9 E. a$ V' s) D) W        @delete="handleDelete"
      ></todoItem>
$ ]9 a5 y/ d; D% C2 a! h    </ul>
3 U5 v  `' f* u9 ^9 F+ F( A% M  </div>
  z+ r' I9 |! F9 N/ w# J. E+ D- a; y</template>
1 ^7 U1 c! _; @1 U
<script>
0 u. Y# F3 z* b0 f8 u) rimport todoItem from "@/components/item.vue";
& r1 l# \7 R) D
7 J' W: k* ]+ g. d% h+ Q6 h8 q% Yexport default {
  data: function() {
+ s% s( d9 c! K3 Y8 Q/ _% N    return {
      List: [],
      inputValue: ""
    };
  },
* i: Q7 S! `, {$ H* r  components: {
( L7 Z) r0 F5 ~+ F# \% ?* S2 K    todoItem
  },
5 M2 ~" s% X/ ^& ]; J  methods: {
: l* x" I2 k5 X0 V) q6 q    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
* T; P6 u3 n- c) e      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
% K; v. b6 y7 O2 v9 P$ M</script>



0 S* b: e% X0 J$ H. t5 o0 o
: D3 O+ R) @2 T9 e1 l% W5 o9 M3 c: @7 H

9 a0 g- Y2 G! ?8 ~! _
<template>
" V3 l: k" z% ?9 `. V( l0 V  <li @click="deleteItem">{{content}}</li>
% N. a; P4 Y, r" w2 D$ u4 `</template>
7 t5 [, p! {  }1 q- O
<script>
2 C7 E" y0 ]. l7 ?3 B; K- Pexport default {
  props: ["content", "index"],
/ }1 P" r: M+ \$ p- E8 v  data: function() {
" Y$ v! Z9 P; p  f6 j1 S! {* \/ ^    return {};
  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
6 ]  W% N( L2 m</script>

, I! N7 o+ Z+ g# U7 X* V  Q5 Z

9 m& n/ M0 k' B5 p  w