|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
# d# ?0 N; y8 P2 @# F5 t
. O# ^; |1 F; r
7 ~+ T- `- n% K, z+ N0 C<!DOCTYPE html>% s* q3 m" f1 o4 ?) M7 I! R3 c
<html lang="en">
3 z X; B; p* R9 d* s) |( Y( g <head># S% U9 R4 b! I7 o( t4 g- ^
<meta charset="UTF-8">4 \9 t) v' x+ B( O+ @% ^
<title>Vue JS V-show, v-for,v-if</title>
6 s+ T+ Y+ z+ Y <script src='./vue.js'></script>
1 {6 k$ y4 }; Q3 P N0 s; |2 w </head>
$ S; E4 T& m# {9 G- n <body>
* @% J% o3 m" y7 Q9 [ <div id="root">! O6 E5 j( s3 v, }, {
<!-- v-if delete the dom; t: F) x. _' g1 e; U1 ~
v-show just set the display:none -->
& x$ ~$ f, ~, S% w3 ? <div v-if="show">hello plmhome</div>7 d. I# }8 K9 x6 P
<button @click="toggle">toggle to display</button>
, G' ^" |( M0 M2 b2 _5 }; ]+ c# j5 X5 n( @. f- a
<ul>
; j% u" N8 U, b7 ]4 D$ U. J. J <li v-for="(item,index) in list" :key="index">{{item}}</li>
" m7 x; j, i" v: G% u% f, d3 K! ?: v </ul>
9 G5 b6 a) P2 t; F- O
9 t2 h5 e( J. z; M$ R8 t </div>
8 E. y! \( _0 J6 s5 F: ^: S5 s" f% m! D e" C! ?0 |
2 ~7 q1 h, f+ L' l. N+ h; g <script> i' m+ A. `2 s% T+ e7 T$ V6 g, L& p
new Vue({
; x: m: b! B0 h$ y5 V0 z el: "#root",. L- z7 }0 ~$ w. S* V' B5 |1 G1 V
data:{
2 s. i+ I- y6 @; s' b show: true,
% s4 A# u% u; c& Z list:['plm','home','I','love','you']
3 d6 `4 L. l6 V) g$ S. s },+ {! G6 W P6 d5 O: \ E$ u% K$ ~
methods:{
2 Q& `7 }9 i+ [5 N: v toggle:function(){) e }1 F% z& V8 ~
this.show = !this.show;
; _6 G0 V/ g3 O, {. v" ]* B }
6 l: I, e1 r S0 o! I }7 t/ s K( x* p4 D$ H+ k
})/ P. R, ~/ f9 j- W
</script>3 `+ t! G2 {7 T( E) z, a
</body>
5 ?2 A( f0 d5 P, B7 ?- g8 A</html>$ h" ^6 {7 c/ C$ @) O8 N
% B2 \" c9 v1 I) S3 |' V. s9 M, {' I" ?2 l5 K; a
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
