|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
. r8 L) n. `; P% e
0 c& |( n- J# q9 W4 h7 m& ]8 r+ U5 y, c9 I
<!DOCTYPE html>
# F# J8 i) }2 z' c3 A1 x/ g' x/ K<html lang="en">, ?) r4 V3 _2 @4 y) K
<head>
, u' a' F& G5 H# u3 T, ~ <meta charset="UTF-8">! `9 i) [4 b, ~9 p7 i0 P5 E
<title>Vue JS V-show, v-for,v-if</title>
& g; ] ]; I$ f F) w <script src='./vue.js'></script>
j$ G- K, s$ d' `+ u </head>
2 D! l1 L: x( c' v <body>
% }9 Z3 M- k; A9 j$ X. j <div id="root">- O, d6 @! P1 B" q
<!-- v-if delete the dom
) \* g& h& |' a: a. m) y v-show just set the display:none -->! @6 Y; t/ t2 D% \+ V7 f N6 V1 g" H
<div v-if="show">hello plmhome</div>
& P6 w% o, }4 a <button @click="toggle">toggle to display</button>: S0 l& Q2 Z( t' r4 M+ @* b" Y. |
! F3 [6 J) N5 [ <ul>
' I! A9 `1 X. b <li v-for="(item,index) in list" :key="index">{{item}}</li>8 l1 X+ Y1 k4 C3 ^, w
</ul># z% U3 j2 J n9 i
, |* j6 X" s5 K5 J& u# _: P
</div>" }/ b2 Q& {7 N. D
7 o7 C3 c5 J* v6 S" i
& y* {- T( O' H {0 s; E <script>6 d. K& e* G; t' o; O4 a
new Vue({# W; M$ z$ Z6 {/ g5 j# m6 o0 D, r
el: "#root",: F+ i! N4 Z' M! `: [5 q0 g$ m4 {. J
data:{
0 F# e7 g. X3 ?* K2 w! a show: true,, z8 \' x7 M {0 N, H c4 j
list:['plm','home','I','love','you']+ k* k: k2 n6 Z$ o, u i! r
},& h" k' I# U' t; G0 i: u
methods:{% r( H O, `- m) F
toggle:function(){& @" _+ }6 X- o6 T+ }
this.show = !this.show;
# j0 N: Q& t* q$ _ }
, s8 g$ {$ L) w+ s }( v% ^8 e2 C8 u5 E3 o
})1 \$ D0 m9 F0 p+ B
</script>5 ?" S* g3 e: }& r/ Z
</body>. Z3 z9 A; K- P# L& a
</html>
1 `& T) [% l: k l
9 u, d7 \3 u3 z* }
; {! W. O' l2 A) W |
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-8-7 09:56:07
