|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
×
' Z; `- o0 _) f* _7 T3 E8 Z0 P" k( c8 G
1 j2 F. Z3 p7 M, R( C<!DOCTYPE html>
% R4 z! G4 h! O+ T<html lang="en">
7 k+ v" i8 g* I/ r' t2 |- e <head>% m/ u) b+ G6 u: M: s! w
<meta charset="UTF-8">/ |& J" @5 G5 W/ v+ v8 E! J9 n
<title>Vue JS V-show, v-for,v-if</title>0 h# H0 H9 }1 H0 v8 E
<script src='./vue.js'></script>4 A# ], a, G% n' [2 C0 B
</head> |& y1 [; I: O9 p; J6 ], P
<body>% Z6 P* b: `/ \9 _$ I
<div id="root">: E! o! I# I' f2 R, r) {: r
<!-- v-if delete the dom7 G+ n) @9 V# [6 Q, J2 w: T
v-show just set the display:none -->
/ E% g6 o c0 f7 y/ P+ w% S, V <div v-if="show">hello plmhome</div>
3 ` c) ?9 Z4 {4 w0 U+ ]% f <button @click="toggle">toggle to display</button>/ A( i: a6 k4 F8 \& ?
' Z2 B" P: T/ r, m) k4 L8 I% S
<ul>7 e6 ~+ ^* N! Q5 V+ l# t* ~' E6 V
<li v-for="(item,index) in list" :key="index">{{item}}</li>
7 t2 E5 S# S! R' u# c- Y4 K </ul>
, L- A. n/ ~2 F; k2 N8 J% \8 G- N0 P& J' s
</div>
# ?) K0 h- C4 x7 B
1 r$ e+ d% y# [2 Q5 k& k3 {
2 e$ y' E+ \ k <script>1 c: i5 N4 I9 ~; e2 U
new Vue({1 E) D0 `) G6 M) p. o k$ A
el: "#root",
p+ F8 |% O# A9 ]6 t2 j data:{3 f1 c& j+ C" c" `5 s. j) _0 @& M
show: true,+ i3 ~3 P9 `3 N4 O/ z: C* y7 w; X
list:['plm','home','I','love','you']
) G! ]2 I% r m, f; Y: D },
9 J5 `( P1 g. \4 [4 X methods:{: Q5 M3 e( S1 _
toggle:function(){
9 z: L/ S6 s. j7 X this.show = !this.show;
7 ]% A$ K8 k, q9 g1 @0 ~+ t) l# l4 E5 R }/ G$ g2 h1 X4 U& P
}
1 @# f3 D. `4 \# O0 Q })
% D. A6 V4 l' S, V/ E( A </script>
9 v: P3 M/ F I7 h: G/ A6 I( y& P: n+ v </body>
/ y8 q8 C6 q# J: W</html># ~4 t6 B% J6 g+ L0 e! T
6 S" J6 q# G) R, E: h2 H1 n; ~9 X9 w# I
|
|
发表于 2019-8-7 09:56:07
