组件方式开发todolist

admin

7 o- l/ c/ E' @<template>
, E5 x* ~! [1 e2 M! w  <div id="App">
% _( Y* l8 R: H; i( k% G  O- M+ z2 T    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
  d6 Y  T3 b0 q1 e; P3 F  z" h    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
. e  u# L% G$ g4 W9 N        :content="item"
        :index="index"
        @delete="handleDelete"
' t6 e( z- t+ E' `# B      ></todoItem>
    </ul>
7 R7 @9 R' l8 ~" t  O  </div>
</template>
- U8 L5 n! \) ?" Y. z# i
<script>
0 n: P  z) E! n7 X% yimport todoItem from "@/components/item.vue";

export default {
  data: function() {
    return {
      List: [],
) m6 K% l& v  K  W1 b: w$ Q0 o& F      inputValue: ""
9 M7 J' |2 ?1 v    };
  },
7 I7 Q1 w) n2 s2 P  a  components: {
3 K$ b5 I2 s, c' f3 _4 e    todoItem
  l+ |+ h5 ~; N+ O( p% O  },
, R( A' C' m) H8 j: s/ j; {  methods: {
% H* ~% |' k' v0 n9 t    submit: function() {
) T, _5 j& s! d& ?      if (this.inputValue != "") {
        this.List.push(this.inputValue);
) E& I. o. V, t1 }4 z      }
      this.inputValue = "";
% L# B" {- F+ i% u  k/ g& |    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
2 s2 Y' c, |' D; c1 v    }
  }
6 f% G/ s# I! h0 j5 W1 {9 {+ w};
</script>

  ^# M' u/ ]! u

$ L0 }: e+ v/ N



) ^4 M4 }$ u5 q: z<template>
# T% l+ ^% G) k- J0 S  <li @click="deleteItem">{{content}}</li>
</template>
  E3 Z% c# i6 Z  t
<script>
% _: c; W6 O" p' _. vexport default {
  props: ["content", "index"],
: v8 k' P* s- g* V: H  data: function() {
    return {};
  },
  methods: {
    deleteItem: function() {
0 p- U: q8 n. l' o- Q( A  ?% w1 W      this.$emit("delete", this.index);
: F* Y8 H& e, x7 c. P6 _' n! D3 d. L    }
2 C% f) ]: W) m0 S+ P1 p  }
};
</script>

$ P0 `5 L1 q) N" n2 \, j


4 l/ a& B% R* u! k