|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
" a3 B) m& K1 Y Y0 s9 |
3 u4 R2 N: X- i1 n/ I
) q: L A, ?' k) ^' ^2 E<!DOCTYPE html>
2 {2 ^* h0 Q* E/ q8 f, f<html lang="en">1 }3 E5 W$ C" b; u' T
<head>2 X! e( a" R7 P0 A: `
<meta charset="UTF-8">* C; w$ b( T( ]/ O+ G% X# c9 k1 n
<title>Vue JS V-show, v-for,v-if</title>
7 c0 a6 D- R$ U4 s <script src='./vue.js'></script>
- c' x# @1 T: d* t& } </head>
) N+ ?: Z* k, l <body>
8 Y5 ~5 x' o: b <div id="root">" K" k1 O2 I+ Z2 A0 ]
<!-- v-if delete the dom3 `7 p% O% [# V6 _
v-show just set the display:none -->
( t3 {: D+ X5 ], C; _9 Y <div v-if="show">hello plmhome</div>2 u6 |$ t2 R+ S' y$ ]9 N/ m! i
<button @click="toggle">toggle to display</button>
; q8 b% W( H3 ^4 x' C9 Q4 [# N
$ ^; ^; G0 Y$ y( U. w" G <ul>1 L5 U. X2 Y- Q1 N$ ^
<li v-for="(item,index) in list" :key="index">{{item}}</li>
" W0 n- j9 q. U$ s </ul>
, p1 k' u/ g7 d- ?1 E9 _
9 t; t7 Y! G+ v$ w </div>7 D' e* Y/ M- K0 l2 a0 L, z
7 \! {- X t; ~- n( x6 g N8 I9 f) p4 @$ s6 A0 I1 k5 V+ V
<script>) ] ^ x! R1 f, ~6 B' q' X
new Vue({
2 a3 _5 L. M) y% l* \! L el: "#root", F) J; C: f/ C
data:{. V) D$ F1 J! P: @
show: true,
& I3 S9 B7 F0 K+ ]$ H list:['plm','home','I','love','you']9 F$ ]9 [7 D2 A9 F: R# W# q
},4 D- [6 ]% i! q6 z! N0 g v
methods:{" n) G4 `8 q% v7 L
toggle:function(){* H% R( D# K0 X$ L
this.show = !this.show;
1 e* _3 f; j; c$ J( s' q }0 B3 W W. p6 q2 ~9 ]
}7 |& ]6 z$ ^+ i( C% [1 j
})
6 ]) [, M) y9 c! v6 ~: }( E </script>0 K L1 x# h2 L+ d! s( }
</body>! R5 g- R- u* m" w0 H: c
</html>
/ q9 b: Q. }* U, b7 a. q; n7 F5 C c, B: w3 O0 e
# p" a; N# K. ~- ` |
|