组件方式开发todolist

admin

# S! z" _( B7 M

  a9 f# g* g# [5 c- U
<template>
  <div id="App">
    <input v-model="inputValue" />
6 K3 d# |* n. N+ k7 G" G    <button @click="submit">Submit</button>
    <ul>
      <todoItem
$ G; [& T( D& d" a% g" N" M! }" @        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
; d3 G( w( |! V* p2 o  </div>
</template>

<script>
import todoItem from "@/components/item.vue";

: W! v. k( q2 Uexport default {
" j9 E" J4 c- o0 B+ d2 Q  data: function() {
4 Y( T1 `3 R( a    return {
7 K& s6 L; a- z      List: [],
' \0 c! W! F0 M+ H. I. p1 @      inputValue: ""
    };
5 C% I1 v* t8 S+ Y6 p  },
  components: {
    todoItem
  },
: r8 r# n" Y) b4 |: m/ N4 n* u  methods: {
( E( R/ Y( J# K' k' g# K4 e    submit: function() {
      if (this.inputValue != "") {
' t& B; P; N2 J& M/ m3 G% y        this.List.push(this.inputValue);
  B! }2 |' B; w# Z2 h5 T      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
6 h1 N* J  H+ U* z$ R6 ?: D9 A) _7 u    }
2 {0 i0 R7 b9 z7 s9 }9 u  }
};
</script>
8 j* ~, Q0 t3 r- ^; q
9 J% L& s7 C1 L( `) R5 O1 p
% A  o. _( @# X) O: v* m

) x2 S( }3 w- r$ s% x
7 G9 t. G) i" z  s
3 ^# o7 X" i$ _& `# A
7 C! O, p9 l) H( D2 [! X& g, i<template>
  <li @click="deleteItem">{{content}}</li>
</template>

6 y9 \  B  t+ l* }! [. [; X) `0 @<script>
export default {
  props: ["content", "index"],
  data: function() {
    return {};
  },
+ i2 c, C  b+ @3 ~  methods: {
    deleteItem: function() {
5 o% M) {9 ~% r' A, a! ~. x      this.$emit("delete", this.index);
    }
+ s, }* d* t) G' E6 ^5 T  }
' f- M- o; `+ E& \% Z};
9 i; Z* k- k+ Y4 p5 R. X$ @</script>

" \8 m$ {3 G- ^9 H