组件方式开发todolist

admin

2 x! I  x/ o5 `% V% n5 |6 z9 ^7 G


0 M" M5 \. a6 x( p<template>
  <div id="App">
. Y; x1 o) I3 I& e9 _5 \    <input v-model="inputValue" />
3 s. g% B+ y% j7 H6 y, |    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
$ N$ s2 L8 X' i( P) S      ></todoItem>
    </ul>
, i- ?/ p6 N3 N  </div>
; v1 W) r2 J# z/ I8 z' C</template>

  m' H. I) b1 \3 m9 I<script>
! U) ]& ]2 G6 t$ A2 y( {, ~! Oimport todoItem from "@/components/item.vue";
7 R( j! y! T5 k/ e/ ~# `
6 J. F1 S6 ^% n. A: r" Y6 \export default {
9 @+ G, J; ]$ U0 w  data: function() {
8 r, P. y0 m/ }4 o5 x    return {
! M* Q! S3 G3 O      List: [],
1 |) ~, n* F$ G' t" g5 d      inputValue: ""
    };
* T. S5 k0 X# M/ L  },
  components: {
, o9 _. R0 A4 G1 i/ h    todoItem
  },
6 f% u4 X! p$ i: {* r  e. q( Y# W% \  methods: {
    submit: function() {
. [' |) d9 S4 I; Q7 W      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
2 j/ ?! ^. I  p    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
. o0 }$ E  Z( k. \0 w) r: {  }
};
7 r$ {; J2 ^. p/ Q</script>
6 `0 N/ |4 v, g% G( `




: u  P1 H+ A% ^- h

( K+ ^) \3 M% o<template>
0 D2 P$ H5 d; b* A  <li @click="deleteItem">{{content}}</li>
+ o! H1 e6 r9 J6 V</template>

<script>
& Y, [3 r7 @0 Bexport default {
( @! `9 P5 ~( @( V5 M, s  props: ["content", "index"],
  data: function() {
+ Q1 a7 l% f' C, |: s6 Q    return {};
6 r4 X( V! W- g/ F' t( _9 h& v  },
  methods: {
1 M1 U; k" ]1 j  P    deleteItem: function() {
      this.$emit("delete", this.index);
    }
4 o0 @  D) F$ j* e  }
};
</script>
. O9 X6 [/ F- \9 }( v, k



* y* N+ E6 s) T; F