组件方式开发todolist

admin

- G0 D' V8 O/ Z* ]( I
. y$ f6 G1 n5 e  y' }. {

( g8 A. e  b2 O' y& ^# @4 u/ D<template>
7 C8 f# g1 m1 E+ u( m& h  <div id="App">
( S; {; P7 ^: d    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
6 v* j" K- y* P! Q8 [3 \        :key="index"
3 o8 y# ~' w3 M1 `        :content="item"
( u- @7 o' \* d' s        :index="index"
        @delete="handleDelete"
  m( L; X5 F/ K2 f% y: l: [# V      ></todoItem>
    </ul>
  </div>
</template>

+ g% s* p- ~. a& y, Z9 o# W) f) J<script>
import todoItem from "@/components/item.vue";

/ d7 \$ ~0 m6 x5 Q* d( n- sexport default {
  data: function() {
    return {
. Q7 v6 Y0 e& R# \0 \' m      List: [],
      inputValue: ""
    };
8 I; J, b) h. U% p( v% T. n, ?  },
  components: {
    todoItem
9 ^8 `0 `- J( _  },
- A" t, I5 R" f$ M! F  methods: {
    submit: function() {
* ~& ?9 i) z3 l1 h      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
7 r1 p% u& O+ {# l      this.inputValue = "";
# @& Y# H& X' P% e9 ^& r    },
$ y# J( _  l# ^; ]& @: s+ m    handleDelete: function(index) {
5 W( w( I  v" p% R      this.List.splice(index, 1);
    }
* N: l5 j1 G9 C& ~* V/ p% d  }
4 Q9 p" E2 ]6 E; d" J; h) i2 c};
</script>

/ ~# v- f: g* u  H6 O7 U" k
6 n. @2 S. q' w; W
) R5 o9 ^7 e# a& r% [7 v- f" T



( K* O! v0 w3 X; x" |! D4 Q) E<template>
6 k8 B- }! r+ b8 c9 B  <li @click="deleteItem">{{content}}</li>
</template>

) n4 l1 `# P$ |1 F% H/ V! G' |<script>
export default {
* X( e( K5 J+ D  props: ["content", "index"],
4 P6 ^0 r- A( ~* K, I" [' U  data: function() {
+ ~0 N- z/ \  B. m    return {};
  },
  methods: {
    deleteItem: function() {
9 j/ c3 t& @( s  M, s      this.$emit("delete", this.index);
    }
; b  @1 M* a/ k; y  }
};
</script>

1 \4 R2 ~: J. [+ B5 O+ N
* L! ?  t( ~  y7 m