|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
# S! z" _( B7 M% S) Z& s8 ~. U" U# @
a9 f# g* g# [5 c- U" k3 X2 X! D' y) v+ M5 {$ i o
<template>7 i0 B! I8 ~& _5 `
<div id="App">3 g' q7 u+ E, r1 I1 h1 v9 k
<input v-model="inputValue" />
6 K3 d# |* n. N+ k7 G" G <button @click="submit">Submit</button>7 B5 O6 s$ D' q* {; A& P
<ul>, y, ^. Z% }8 R, f1 R# \
<todoItem
$ G; [& T( D& d" a% g" N" M! }" @ v-for="(item,index) in List"4 i% H+ F% R1 \; o2 o
:key="index"7 ?' r) z; k& |" g8 A' M6 m' H
:content="item"6 y. [3 g" g1 U+ ~' Z
:index="index"$ \+ ?8 Y4 O6 }% t
@delete="handleDelete", E/ ~ ]% t6 Z, I' s- I
></todoItem>, A- A; I# N5 L) _
</ul>
; d3 G( w( |! V* p2 o </div> ]7 ]1 A: P; y+ F0 h s" Z3 k8 j4 v
</template>& G& m0 `4 ~- p
3 V4 j j) i- ?) j! P: z; h
<script>: K" e9 G: f) ]5 j- q, {
import todoItem from "@/components/item.vue";9 N* q: w3 |$ I% C! c
: 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: ""( a+ m/ j( n$ F- [; l
};
5 C% I1 v* t8 S+ Y6 p },5 I1 |& W0 I) [
components: {3 e, t' w5 { E- G" u# J/ Q1 K
todoItem3 ]- M+ P3 a; G) W& C; X
},
: r8 r# n" Y) b4 |: m/ N4 n* u methods: {
( E( R/ Y( J# K' k' g# K4 e submit: function() {- C/ H V, B8 ?' Z, Z0 a x
if (this.inputValue != "") {
' t& B; P; N2 J& M/ m3 G% y this.List.push(this.inputValue);
B! }2 |' B; w# Z2 h5 T }& W1 V: n. M, M0 Y
this.inputValue = "";4 |4 U3 x4 Z# V" T9 T6 f: K
},$ |: @& z( e: {+ {+ {
handleDelete: function(index) {' P- K# U6 Z# E. K. F( p
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 }0 n5 V# s% i- J
};9 x) \$ z; Z {. l F+ I
</script>
8 j* ~, Q0 t3 r- ^; q
9 J% L& s7 C1 L( `) R5 O1 p
% A o. _( @# X) O: v* m, C2 R' v: P5 [. K# _) C! q
) 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> v0 @! j# D; D- C
<li @click="deleteItem">{{content}}</li>4 [9 X% @& h2 T/ \. A1 ~9 _
</template>4 R# u: `1 ?- Z
6 y9 \ B t+ l* }! [. [; X) `0 @<script>2 N: \. L+ R3 T
export default {+ _0 l0 |8 X2 X% T0 E
props: ["content", "index"],; i$ l1 p2 A5 d1 \" x6 f
data: function() {6 x f: q; `) M8 M4 ^+ U- A% g* S
return {};8 }0 ?" a1 R2 z0 q# P; N
},
+ i2 c, C b+ @3 ~ methods: {- Z) c$ b* [# I! H( J
deleteItem: function() {
5 o% M) {9 ~% r' A, a! ~. x this.$emit("delete", this.index);# n$ h w1 P) y* T) _) s+ g+ g
}
+ s, }* d* t) G' E6 ^5 T }
' f- M- o; `+ E& \% Z};
9 i; Z* k- k+ Y4 p5 R. X$ @</script>0 b, ]$ s3 u# z" O$ t1 H# K
" \8 m$ {3 G- ^9 H/ c, P& K, |! E6 H/ {" x2 F
2 Y, B3 ` i* ^4 s3 D6 ?+ }
& @/ `9 I/ R3 ?# a- U
|
|