|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
2 q3 F0 ?* J9 m
/ T: P6 ?) C. ^7 @
6 S6 `8 o6 N0 D9 k/ B: p F<!DOCTYPE html>
6 K c" o0 ]& A7 ?- p4 z<html lang="en">
5 v3 ~5 `( k! D- _! T( I- I <head>
* f5 f8 \5 w, ^) Z3 d6 v# \ <meta charset="UTF-8">% w9 C1 z9 H6 ~% x5 X9 s
<title>Vue JS V-show, v-for,v-if</title>
" ]6 [0 j i5 Q- g <script src='./vue.js'></script>5 M2 K1 ~! g; r d& ]0 ~* M
</head>% c( f0 W& S, A' D
<body>
: c8 z, R. H3 R) _8 E <div id="root">0 n+ A4 i5 f8 M# R) O# A
<!-- v-if delete the dom
3 z! ~( u, Q) A# d |, V v-show just set the display:none -->9 `8 v% a5 x v: ~+ C! w& h
<div v-if="show">hello plmhome</div>2 _2 Q/ c! M7 U" l* n
<button @click="toggle">toggle to display</button>
) q! K; ?7 S6 v7 ~
. Q/ Z" C9 v9 a, q# S3 C$ R <ul>6 H" Q& q' o E7 O5 F5 }
<li v-for="(item,index) in list" :key="index">{{item}}</li> m- |; ~; U9 v
</ul>
6 e% C) h' q6 `+ I$ n7 e& H& X6 [6 K, u# G% o1 O# G& N# F3 l4 A1 _
</div>1 V0 Z" q5 p- `9 t
4 J f) Y6 W+ @8 r8 J6 i$ c {1 k
<script>
3 U7 |4 c0 c0 c0 ^: J2 N4 P new Vue({
7 V1 S6 C1 h1 `% K) A" x el: "#root"," X6 R- E5 R6 P
data:{( H' W; a3 D- R
show: true,
% {/ b. O8 L6 E& ~; R' v list:['plm','home','I','love','you']+ z' @: m+ @9 _! @" A+ m
},
* l* }& t+ T4 ?0 c# b methods:{
( t4 }. ~1 I* H2 j7 I2 _ toggle:function(){
& T, o' w H3 W. S0 d5 v# c, G this.show = !this.show;9 Q( p, ~% O: Y. n8 \
}4 ~; Q* {, s, a x+ B6 _
}
+ I6 ^9 E2 p3 ?9 |% c, k) k- u }): k& R/ O. p; t- B
</script>
1 r" Q: B: @# O! l. u. L </body>+ L( r w8 W7 z* ]. I2 I4 d" P. Z
</html>
% B4 T! v; {) y' Q: h# `* ^" S" h
7 F+ j2 i1 M H# m" n) J |
|