|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
9 G( d/ L- k1 V$ o o0 A
* W6 P6 B0 ^/ o) t( L0 t$ `! J' i9 ?, ~' _. i4 ~' Y; X
<!DOCTYPE html>
; ]7 |4 B# I+ U6 K1 o5 @5 m8 d0 l5 w<html lang="en">
# f' ?/ k; l0 u) ^5 M <head>
% Z5 q' P5 t; |: u+ c9 L5 @ <meta charset="UTF-8">
$ V$ F5 R+ }) m0 ?' ^7 m <title>Vue JS V-show, v-for,v-if</title>
3 V4 O. V+ A+ A <script src='./vue.js'></script>
! _, }2 i; i5 M </head>
$ q! X) B" n) a$ ~0 j <body># @+ b9 h8 R: h4 c1 v8 t- }
<div id="root">
* t; r: F' `( x <!-- v-if delete the dom
! Y2 k4 a+ w, m v-show just set the display:none -->0 \$ h* B2 n- H
<div v-if="show">hello plmhome</div>
& u. f6 c1 G( Y2 r1 x% q0 z <button @click="toggle">toggle to display</button># E* T, z% @ o9 u3 f3 [5 L0 |
! G. q2 v, R# s! \5 I( I0 w3 y: T6 _1 Y <ul>
- k# T& K5 P6 K <li v-for="(item,index) in list" :key="index">{{item}}</li># _0 {6 r6 {, w5 z
</ul>* J: ` K) _7 Y7 ]4 R7 a2 a
2 r1 c4 e" Y" N/ V </div>
/ Z" Y- b% ^0 d+ n+ E8 K- j4 w3 C1 v9 ~6 p# I9 S
/ \1 f9 G9 O) t6 L& o <script>' K8 q6 ^/ _6 U. K8 R( E4 ^6 i. w
new Vue({! v m e6 s% B" U8 c
el: "#root",1 h+ N# m6 T7 ?1 G4 X
data:{& x! O( U% h# y- C, z
show: true,1 ^3 x. c: L& T. X4 o
list:['plm','home','I','love','you']. D y9 X9 w ]; v
},* z1 G8 U: T6 q) x5 I
methods:{
% T2 ]2 a. f! g" G' l- c$ [; c$ _ toggle:function(){+ {/ p2 ^& Q+ j$ X. M) A" L3 ]1 Y
this.show = !this.show;
( W0 P8 `2 `1 y2 I0 m% N# C8 _6 i# J }
7 c) [) s; P I }
+ ^$ Z8 C9 K8 W7 z/ p' i \4 z5 ^ })- M& N" q$ g# w2 P# T
</script>% x% }- S' W1 ^2 V
</body>
6 P( Q9 L8 A1 H) e7 ]" H</html>( a. S. P9 X0 k. G5 \7 _
' z+ R3 k6 [% I. |2 E8 T
- u4 A" ~: b, h, T1 h/ n5 N# ^ |
|