组件方式开发todolist

admin

  S9 n6 b5 \. `* U

9 L/ D) L1 D1 |  a% ], F<template>
  <div id="App">
! `/ {) d% b$ Y% D7 \    <input v-model="inputValue" />
7 u8 \) A- T) L% B' v, m& ~    <button @click="submit">Submit</button>
  ?) @8 @; F+ q6 k    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
+ U! d$ u4 j7 G    </ul>
; s: W6 x3 i* ^& \  </div>
% z0 `' i( Q3 S: [7 @+ z</template>

  ^+ D4 b8 U! d7 O<script>
. S2 n" \$ A( C/ d" _6 Fimport todoItem from "@/components/item.vue";
5 h3 f$ E. W1 O, s3 `* r; y5 _
/ y9 o* X( F( e) c* L$ p8 }2 @export default {
  data: function() {
    return {
2 @: O3 x7 ]4 H" x5 U      List: [],
1 M5 {) J& U! e, y      inputValue: ""
. ?! |8 s! Q' ~8 F. f4 ^    };
  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
6 e! B! J: p, r        this.List.push(this.inputValue);
- Y0 F! Z4 S6 R# |2 |3 p- v1 \      }
4 O: @. {$ X; }  m0 B      this.inputValue = "";
    },
    handleDelete: function(index) {
4 @' I) U  m( F$ y! A# \  q5 S      this.List.splice(index, 1);
, U- T9 T+ M# r. @+ A+ B( D8 B    }
  }
' F, Y+ l/ b$ _. b* ?1 H) P* i) P};
</script>

& Y7 Y3 ], x$ _% v5 {
& G' B. v3 s  A+ C$ M. Q

& d: R# C7 Q! r$ X8 s- |$ i  K6 s
1 b8 _8 G- y9 \

+ [, O- p2 I4 z/ r- T& [* ^<template>
  <li @click="deleteItem">{{content}}</li>
</template>

4 r' z+ D# J$ t/ D& T- w<script>
' q- M. a" n( B. W& ]export default {
  props: ["content", "index"],
  data: function() {
1 {! \3 g# E2 \  E' K    return {};
  },
3 Z% X8 z! t2 E! I, y8 \  methods: {
    deleteItem: function() {
& V: j3 @, M% J, m% X      this.$emit("delete", this.index);
" S7 o7 A4 ?+ g. C( M    }
7 @' l5 ]9 }7 |( e' z% {  }
};
</script>

. X7 s" T7 M% M
6 Z8 {! d% o8 r$ o- j

6 T7 x- A# a( o$ k/ @