|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
p( x6 J, C8 _1 U9 Z7 _0 ~- e
: e: M. s% q. W0 ] |: I
* p1 X# B; y5 q+ I<!DOCTYPE html>
x- J6 P2 I8 v" k8 J% |8 Y( A3 {<html lang="en">
2 l* P4 d' R+ G" _6 Q$ p8 | s% L <head>: X8 t9 O2 n' l- v. y" Y
<meta charset="UTF-8">( F% ]6 D& S2 ]( P# [2 L ?- J$ R5 ~
<title>Vue JS V-show, v-for,v-if</title>
7 R9 X4 c9 b. P. X9 V. o <script src='./vue.js'></script>6 C) K2 i" [# \( v
</head>
6 f; L5 J" r; U5 O, | <body>
+ F& R+ }% t7 o2 N <div id="root">
. F1 w8 h5 Z! e- \5 F& L3 o <!-- v-if delete the dom) Y7 A3 m: V, @
v-show just set the display:none -->
6 j5 t' `. D' m1 o0 ]1 N <div v-if="show">hello plmhome</div>4 ?! x4 X' a' d! ^, u
<button @click="toggle">toggle to display</button>
5 q) z& I$ z8 z2 M' C9 j
. P# V# m. P7 p1 o+ E; W <ul>' q6 A! i) b. O- C4 |6 t
<li v-for="(item,index) in list" :key="index">{{item}}</li>6 n8 \8 p9 \+ u3 }4 k, ~! U
</ul>/ h3 i! `$ C6 j; }
0 F0 j# b$ Q$ ^- W( t
</div>
- e" }8 k0 x% c1 W0 n2 [ }& e3 y7 ^9 A" c& `9 _2 M! _. b9 V
) o, p% ]4 d2 K) s/ A <script>& x% Z4 P& J+ S2 f3 \
new Vue({
9 J% {! R" A; P I0 ^8 @ el: "#root",
$ X. k5 c( ^- H* d6 d2 b data:{
' K) j3 s; c; ^; w7 |- a2 l# l% u1 z8 u show: true,
5 \, _8 l% Z) Y! a7 E- T list:['plm','home','I','love','you']7 C% }7 n( M/ z. b; M
},. A7 F1 t5 B4 B3 h- m
methods:{. ]# ]3 S7 M$ D; p$ V6 R4 u, {4 [8 R
toggle:function(){' G, S4 f( ` z1 n1 d- j
this.show = !this.show;0 _6 |" f: B; j$ y. B
}
! I6 d. o2 `8 V }( _4 D- }" e( \5 r. K7 X
})9 M' X% c5 Z3 X
</script># N# W4 j" x: L( p. K
</body>( l' o- F2 i1 ~4 ` {* u
</html>" V9 z) I8 ^7 i0 M7 j' T0 M" _/ F
$ ?9 y6 L5 T* Z, z( m2 a2 n* |6 N$ E5 L% o3 K) v5 s
|
|