组件方式开发todolist

admin

$ l! K$ k' V1 J7 ~1 x$ e0 ~


3 c$ Z- z8 }' \: ?<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
( R9 c& l' q2 S% ?3 z    </ul>
  </div>
$ A' z5 `/ y% Y6 {' A$ [4 u</template>
; i- y5 c9 q" I; Y- u: h
<script>
* w5 S- y# B( j- Q: @* nimport todoItem from "@/components/item.vue";
. j9 p# J7 Q1 n
0 |' _/ C3 }- U1 N! s: P9 b9 Oexport default {
  data: function() {
    return {
6 d( l( S* G; L$ F8 V* Q      List: [],
      inputValue: ""
" ^$ J5 }% s$ B0 U    };
  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
$ w& Q$ ~$ c# o, F1 V1 r) X- j1 e5 |      if (this.inputValue != "") {
        this.List.push(this.inputValue);
2 [* w- I. `% o0 d      }
" G& @& F: O. l6 r5 p6 U      this.inputValue = "";
    },
. S& |  n8 T- d) Q9 @& w$ W    handleDelete: function(index) {
' R& r1 t% _# a/ N/ o$ ]2 R      this.List.splice(index, 1);
! c0 o5 y' |* j! H5 a    }
6 V: w: P! i- z- o% w  }
8 Q- Z( k1 I- E& k) J};
/ p$ _6 G% P- r</script>
! Y  i9 n8 e& |; F: m) ~+ f9 {


9 y% ~/ O/ E  f! ?
6 e6 d3 X  G& F

2 j; q( K9 g5 i) ]1 N6 s
<template>
  <li @click="deleteItem">{{content}}</li>
( R/ m2 l/ l2 A: i- P2 t</template>

& s3 I- x- {  L* F% Z! K<script>
export default {
  props: ["content", "index"],
8 ]" Q1 f' [: `0 h/ I: v; l  data: function() {
6 w$ w7 U! v$ F4 W3 {    return {};
+ m+ p/ f/ x( I, \" ~  },
6 h  o- u8 s% \/ U- d0 ]  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
/ j. F- @% b7 t1 Z5 e! N* ]1 b    }
( S& i* {/ b% D. }  }
};
</script>
  v( r6 E4 f9 E2 [
1 `. ?% O: ^' _+ l
% |1 s- C& t1 [% y( X% Z3 W