|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
2 Y4 V6 F5 F, l/ P. o& M1 r4 g
6 {( G" M6 m& E1 U& E C- c3 x6 ]2 T8 N' V; l/ F' w5 B5 W1 j
<!DOCTYPE html># g% v# y- B4 X7 j& o3 ~8 ?
<html lang="en">
# B: L# b! R& m- G1 l1 ]$ f/ n <head>
- c7 l! j0 M+ T6 c, q( h <meta charset="UTF-8">3 D( l3 r: s) r6 W
<title>Vue JS V-show, v-for,v-if</title>
( r* _6 q. m9 w <script src='./vue.js'></script>2 P) P: j! N! B" L/ t8 b; e6 o; x
</head>
% e* v4 U. d: b4 N <body>2 u5 W4 l. e* @5 m3 x$ ]6 |+ v! a
<div id="root">1 N/ M' \$ |$ i
<!-- v-if delete the dom, e* ?+ q" V* U3 }
v-show just set the display:none -->
0 {) m7 O( T/ ]! F$ }2 }* Y <div v-if="show">hello plmhome</div>6 c' z5 U) [4 L. L: f) k% ?
<button @click="toggle">toggle to display</button>3 F$ \8 y& v# t2 Z) I' C
( T, n7 f, b0 S
<ul>2 w3 W7 M+ a0 V: z- @: M
<li v-for="(item,index) in list" :key="index">{{item}}</li>( \5 [9 t2 v4 g; I
</ul>
+ ?" i# j3 S1 F: M/ h
9 D+ V, w* R1 g1 z </div>
8 l- M- w! v, x
' K; g7 F$ d' p1 j* V
5 J4 [0 @* d% M- c( S6 s$ W5 x <script>
6 w9 A& Z* P" D new Vue({+ R, s6 R2 ~2 W
el: "#root",
3 p7 j1 n' w7 [: U4 o data:{
$ t: l7 r; S9 v show: true,! Y5 [+ [ o: u! r
list:['plm','home','I','love','you']
, _1 _* W/ ^+ T6 _/ V9 a) @ },
! N* U0 o" J$ }: P5 y! n& R methods:{
5 Q6 ^1 N" K! U6 C) V4 y toggle:function(){
& Q# [% U* K1 ?/ F this.show = !this.show;2 X' L8 T# V! R5 v
}; C. ~$ k* Z: O) `) f5 b D/ r* S
}
& _2 O2 A% }1 K/ D })
3 x% t m, E5 e, x* i0 N: Y </script># a2 \; [3 f: f5 C8 `
</body>
4 n9 S2 N& R/ c6 h# q3 ]</html>
0 p L1 o/ w L/ z+ s% @. t5 z' u
! t& l% c5 X" R6 v% O; ^" L0 G+ g7 ~9 w0 [$ j" R. J/ |
|
|