组件方式开发todolist

admin

+ m  F5 B( d$ `9 S! h2 @2 ]

<template>
  <div id="App">
    <input v-model="inputValue" />
4 f1 n0 a1 ]+ E    <button @click="submit">Submit</button>
    <ul>
3 _+ |9 B& w1 M& S/ o      <todoItem
# ^' u' c! \* Y6 H9 D5 c  B: W0 l        v-for="(item,index) in List"
        :key="index"
        :content="item"
, U5 F: r( P4 v1 E: S( a        :index="index"
; ^# w1 t, `# {- w3 ~$ ?8 [        @delete="handleDelete"
. b3 \7 [, h, X* f      ></todoItem>
    </ul>
5 B' ?' ]. e7 D. J6 g  </div>
3 _8 Y( V5 m1 l  i1 u</template>

, b6 [1 }: |( B) d1 f* W<script>
import todoItem from "@/components/item.vue";

export default {
! ?4 O8 V' @  T: d( [0 L  data: function() {
    return {
) O% k9 ]. o+ z2 L# P, m) _  Z      List: [],
2 u; l; B* L; n9 ?" Z/ g2 v# ^) F2 J      inputValue: ""
    };
8 \3 R- L/ [/ t9 y3 r  },
  components: {
5 u; y3 s& D6 J: L    todoItem
4 Y8 r% N  Z. X3 f0 {; `  },
  methods: {
3 B+ {% ?2 `7 i& [: l    submit: function() {
" S* \/ J5 Z  T9 {2 ~. ?      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
  K) {' L# T" d1 j3 J& i      this.List.splice(index, 1);
    }
/ W& G: r9 Y, n2 r7 R3 M1 b  }
};
7 T6 l/ p! ^& Q</script>






! T, F" b2 d# V  ^. i
<template>
  <li @click="deleteItem">{{content}}</li>
0 |" J$ H. L2 f1 g</template>

<script>
export default {
! {3 h2 d( y/ x( b+ t  props: ["content", "index"],
  data: function() {
( f: _  J& N( c9 d    return {};
  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
</script>
* w1 w3 ~1 @' ?

; o* }& B2 z4 f