|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
, h7 ^2 c7 H: x* p5 H; l2 [
' d8 M1 @ w! ^" @4 ]' t$ L" |. W. r' ^+ k& E% e3 c0 N9 d+ ^
<!DOCTYPE html>
0 S& o( r' k! r<html lang="en">
% S% n1 r" [3 R2 _9 u* r) w! F <head>/ Q7 @/ p% r! ?6 z; p) A# P! Q
<meta charset="UTF-8">* F9 T* V" c+ ?/ m
<title>Vue JS V-show, v-for,v-if</title>" x& r- _: X7 G2 W% L# ]9 B
<script src='./vue.js'></script>* G$ x- u) C# W% v
</head>
+ l9 j# r2 t3 d/ Q$ y( K; |! M <body>( x# Y; B/ w# F5 e
<div id="root">
7 ]* _/ N1 d, T( L0 J$ } <!-- v-if delete the dom
( x! y5 ?: E9 A v-show just set the display:none -->" d) E6 k2 T" K$ m( `. D; }% w, x
<div v-if="show">hello plmhome</div>
! Z, B0 f( S+ N( G' S2 K' ?' \$ t <button @click="toggle">toggle to display</button>4 D4 _- B0 f/ z% j3 k
! c5 M3 x; H: B% Y' i% ?9 u7 l <ul>" E M8 b' b; P2 V" X, W/ R
<li v-for="(item,index) in list" :key="index">{{item}}</li>( U [# _5 f; e
</ul>9 U( a5 i# |& Q& e
% c9 L# f* u& c5 l y5 a
</div>) k3 p0 F2 k6 e" w' Y# s
0 `6 a5 m* x: |
% _9 |/ G8 U9 v" D, e% ?# J" t4 k* A
<script>, ]" E) R2 t/ Z: k
new Vue({
2 B. C8 J- h/ s* _- T3 Y( n el: "#root",9 ^) `% n+ _& e) b4 _0 u
data:{
3 B* n4 @3 p% m+ H show: true,* A/ ], r$ s6 @
list:['plm','home','I','love','you']* R( i3 U8 V; [& I# m
},/ P0 ^6 a1 Y; R( l5 p
methods:{
# p; o$ `8 L+ [6 e- R toggle:function(){8 z! s9 z7 |% i3 X2 j+ r
this.show = !this.show;+ |" Q, d4 I+ T4 o F% {' c" M
}
- n0 b2 Q6 ]7 y& H" T5 p }! _5 g, S2 u1 w1 ]: x! E
})! Y( p, l- E( k9 a8 j+ B9 ?
</script>5 Z& ?: D; j9 S
</body>9 d7 U4 |, e. P+ C& x0 B. X
</html>0 M2 L* O2 d: `1 Y! O) c; x* j
; A- v( |/ S' Y/ U: c' d
: _9 l' d% b0 b/ ] |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
