组件方式开发todolist

admin

' ~% G" ?! @% E7 W* S" u8 D
9 o& v$ {# M5 L+ S) R

<template>
  <div id="App">
5 }  s0 t. T* [: }* n    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
: Q& ?" C" [" b    <ul>
! p# x! v* E9 {* w) A, u      <todoItem
        v-for="(item,index) in List"
% w$ V( _7 l/ Q$ G1 e* ]( J        :key="index"
9 O7 W: d3 P! X8 W! r        :content="item"
$ L, b! v( `7 B" v9 w; B( u- s        :index="index"
        @delete="handleDelete"
      ></todoItem>
0 T% _7 z, w3 S' |0 F    </ul>
  </div>
, V$ X* E5 B; Q</template>

4 Z5 {3 W/ O7 U! E. |<script>
import todoItem from "@/components/item.vue";
% _: o. R; J) t& s0 F
export default {
  data: function() {
    return {
      List: [],
      inputValue: ""
    };
  },
0 i  U$ e: L# W& W  components: {
    todoItem
% ^3 }0 f# r( t/ }9 V; W( N$ @) Q  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
& V. T- }! M$ T& d' I+ n      this.List.splice(index, 1);
1 q; ]. Z* L" N3 S# z, D) ^/ c: _, i1 Z    }
  }
};
</script>
8 |- x6 u: o' X% c# b' G& J


% X! j( v+ I% y  ?4 z. q0 I
1 R2 h# p( o$ J) u

* Y  h, i2 _/ M& h* Z' s
$ m# E; R- v1 u<template>
4 k6 e5 @& a; y7 ]$ D  <li @click="deleteItem">{{content}}</li>
0 w1 t3 N, o; q</template>
) q# w% u- a, K! C: P
<script>
( v' v" @4 ]: a& Jexport default {
8 ^' D0 O, [. M! t  props: ["content", "index"],
  data: function() {
    return {};
  },
8 ]. `2 y0 E$ a( Y, u: ?+ o  k: P  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
  \6 z1 C% l$ `: ?) _/ s' t    }
  }
};
</script>
/ D& t2 Z7 \; X3 f0 f7 u0 c2 }
! `4 N1 s4 Q7 U) l) F* N. x
( B3 q  S' ?0 ^
# a' W4 B7 Y' h