组件方式开发todolist

admin

% x3 j& t4 V- }; b8 C9 d

4 m% z# j4 E. W7 c
<template>
8 C' l6 d6 @9 T0 H% P, X: t  <div id="App">
; h; I0 \/ H; M2 k& Z1 M    <input v-model="inputValue" />
  ]" M, t" d+ w5 u    <button @click="submit">Submit</button>
* i. ~& R* ^; e5 y    <ul>
      <todoItem
! h. m- N( w5 I, [7 X2 J" [/ n$ y( \        v-for="(item,index) in List"
        :key="index"
9 u' o6 p* B* j, o2 L6 ]        :content="item"
% `6 S) ^1 y# f: L* x" X        :index="index"
! F% P& _6 T( u  ^/ F* _        @delete="handleDelete"
      ></todoItem>
& _# p3 `8 G5 l. Y    </ul>
5 ^) Z  s% ?" R- l  </div>
</template>
$ M; b1 U3 J# H# D* N
<script>
import todoItem from "@/components/item.vue";
9 T1 P3 i+ T/ n5 f" `
1 A' g8 N/ z/ z" Xexport default {
  data: function() {
, {, u! ?( w0 T# K5 n- ?) B1 l' C    return {
8 x+ R1 r4 k% Q. D3 H      List: [],
3 j  u' ?- E/ @      inputValue: ""
    };
6 R9 |) H* A( l& V+ u6 ~/ m! h  },
$ C# h( V. J# p, F! n7 Z* c3 H  components: {
    todoItem
7 h3 ^! B# }1 P; G. K( ?  },
5 v8 M% ~: }; s/ S' J% n# d# j  methods: {
    submit: function() {
* j. \. W2 \9 C. N7 I1 H( @! X      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
; @: \/ s2 y) {* Y6 E      this.inputValue = "";
) F5 O8 y% h( L7 {! A    },
    handleDelete: function(index) {
* d, ~8 ^; T. Z3 Y+ Q! n      this.List.splice(index, 1);
( v! F6 l' ?$ y# X$ t    }
  }
0 N) a2 T. v/ P7 @};
" T$ Z$ u( D5 S* F6 i</script>
2 V' |0 N  U  ~

* A- P, c. y: v9 n


  R1 x$ g- B7 H' S

( p' }. j$ [+ l* {, |) M4 X8 o3 ]<template>
5 [% b0 d* O: P$ A  <li @click="deleteItem">{{content}}</li>
* R4 t1 v8 y/ M</template>
7 b4 u5 W& h  T5 `
<script>
export default {
: k9 K/ }' W" Q1 ?! J) ~  props: ["content", "index"],
; L4 Z$ J# D! e; U8 X1 _2 D2 X  data: function() {
, A- j7 S3 f) s1 z1 h2 K    return {};
2 H% t" \( O) k9 y4 U: R/ D  E  },
) x* c" f* _8 M3 `4 N1 H" u  methods: {
+ X2 O* p1 d2 ~$ _    deleteItem: function() {
      this.$emit("delete", this.index);
    }
3 X& q  B& c8 x/ [  b  }
};
</script>

5 ~$ @) l# N" R% c" r# R) D" o