组件方式开发todolist

admin

. h! Z! J' j1 }4 N  O! D


<template>
" t& `7 v& n& k- N3 a- a  <div id="App">
    <input v-model="inputValue" />
/ z* g3 B* Q# @1 O    <button @click="submit">Submit</button>
    <ul>
      <todoItem
5 L' o3 f( y1 }9 W6 x" _+ H- {6 s3 R        v-for="(item,index) in List"
        :key="index"
+ c7 `7 O/ Y9 ^        :content="item"
, c; l6 ^4 y. d* I$ n        :index="index"
% `2 q  L2 Y6 {        @delete="handleDelete"
3 b! d  T! i3 i/ ]7 ?; g( G      ></todoItem>
3 o- g) I8 U; i# G7 P0 H    </ul>
  </div>
5 T1 n( d' b' X. S5 q$ h- F; P( c</template>

<script>
import todoItem from "@/components/item.vue";
7 F% e4 H$ z* G8 d! q3 }$ i/ [& S
export default {
4 v" @+ G/ _4 T! f" O  data: function() {
' f. m. e1 u2 X    return {
3 K( T# n5 E; f5 h1 T      List: [],
      inputValue: ""
    };
  },
  components: {
8 b8 a3 P2 b5 v2 p6 j. V; l    todoItem
  },
2 H$ P- {: a2 J' A( ~  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
# G& t* k2 ?% Q8 Z) H4 s    handleDelete: function(index) {
. f. t1 {7 S8 m* V# ?9 z+ n  X      this.List.splice(index, 1);
* f" z$ N% U& z2 k( i    }
  }
};
9 B/ u: W9 D& z</script>
5 [4 j  B- F. s. L5 Q






2 H3 Z/ K, T2 D, W  G: J* p8 C<template>
  <li @click="deleteItem">{{content}}</li>
</template>
# d8 Z9 d( ~: m9 T4 V/ g1 A6 z% C1 i% r
<script>
export default {
  props: ["content", "index"],
  data: function() {
    return {};
  },
# k8 F' M- _! n+ G4 X6 N  methods: {
( T  {8 ?; N0 l9 L" X    deleteItem: function() {
6 E( `  i8 r+ L% t, \- S* s  t5 G      this.$emit("delete", this.index);
    }
% D! J. A7 V) U$ G' B0 r! F1 W  }
};
</script>