组件方式开发todolist

admin

6 f+ I7 {: p2 W) q  Y& L, X
5 ]. v( P* o: r" u2 O- D5 s" e+ W

<template>
  <div id="App">
    <input v-model="inputValue" />
+ ?7 R7 g- Y4 P/ N2 a$ i    <button @click="submit">Submit</button>
' d* _. I$ z/ K    <ul>
      <todoItem
0 a9 d" Y( p/ c( m( c        v-for="(item,index) in List"
/ b8 D( I. e2 W        :key="index"
        :content="item"
- Z5 p) b$ w% {        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
- P( }1 r- j) W0 f/ h- ~+ k</template>

<script>
+ b. z5 X% K0 }- Uimport todoItem from "@/components/item.vue";
# N/ X8 P" \% z2 ^5 }" `4 e* Q; z: s
2 n  e" n2 e, E: n: B8 n9 Vexport default {
  data: function() {
    return {
      List: [],
! m0 D6 G! G  v2 h( a$ ^' I) Q      inputValue: ""
. x& L  n- c; I, o3 o1 N    };
( c8 d3 R' s. ^( S0 Z  },
  components: {
    todoItem
  },
# R; o! u( k! y+ T& u" g' d  methods: {
    submit: function() {
      if (this.inputValue != "") {
* y0 R+ i) S1 [! ^5 w+ V        this.List.push(this.inputValue);
* H/ |# H% p* N4 X" J2 u3 G      }
% m) J+ t" K' |1 d. A# N      this.inputValue = "";
    },
3 b2 z! y( r2 t2 k9 k4 J    handleDelete: function(index) {
      this.List.splice(index, 1);
) M, h; b, f2 W# C, W$ x" T    }
. }5 O5 n8 ]% l  h  }
' }! ~. w5 r  q# f/ ^};
4 c4 \0 S: ~! K  S: p- H, q' U</script>
- p% M- X; o/ _7 ?


+ f9 H' b% h) u; [& g& T
9 t2 K2 g! W# O9 P
' q% K8 m& s9 n3 _& N

<template>
' }( J7 S: B8 h, Z  <li @click="deleteItem">{{content}}</li>
9 ~7 Z, c. y2 C' `</template>

1 D& r! G! x% N# y' z9 R+ I<script>
export default {
  props: ["content", "index"],
, \; T9 {* r! E: t  y7 P. D  [6 o  data: function() {
. i( ~1 E+ @3 H2 o  D$ N    return {};
5 @' D5 N: \0 S' K& }1 [  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
( a% I9 ~" ?9 G, z4 j- q# W% A1 M</script>


1 }6 g$ I: _4 s! G5 ~& b* @

$ I. \2 R% G. \, w* Q, C