|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
4 C# t2 o/ F ~& b7 R. s' {0 Q5 s% n$ Y$ E) i' h c/ ?2 [7 c5 _( w9 B
9 g& q3 W: g+ `' F- }' J9 d f/ E<!DOCTYPE html>
! @8 u' w( `' R! b& b6 ^; |- ^<html lang="en">
! o9 j; I3 l) c7 H3 R% L W <head>) X( \! X2 v+ ` v& u( [
<meta charset="UTF-8">( s/ M4 q. q9 G
<title>Vue JS V-show, v-for,v-if</title>8 ?& M" w$ R* N9 R/ m9 ?5 y: D/ d
<script src='./vue.js'></script>
) l/ P: m7 J9 S6 v7 f. x8 p. X7 B5 Q </head>
& l6 Y( `$ m) ?& R6 q3 x2 B <body>
: d. K$ {2 \$ K$ l7 t" }5 f9 L2 R <div id="root"># H' S3 _4 Z O
<!-- v-if delete the dom- i& c; x# ?; g/ ]2 ?
v-show just set the display:none -->
6 f2 E6 y2 {) X& d4 d2 v! |& y <div v-if="show">hello plmhome</div>
. P2 @' E% _ ?5 [ <button @click="toggle">toggle to display</button>7 h3 H6 h: H6 {) j5 T; u
) S9 X2 W( S, \! c <ul>
7 F+ F0 p$ F& V7 {0 {* F% M <li v-for="(item,index) in list" :key="index">{{item}}</li>
) y0 n9 C, R% N4 l8 R1 h4 D0 w </ul>
1 J( V( N2 v' Q8 u e
7 f9 U, U3 a3 r5 n4 U" l </div>
8 `2 H* M3 l2 ^
5 _: e/ C3 p: z f. e& m7 N1 v V
<script>
5 J# }( r+ }& W4 B, h: Y new Vue({
- \! U, G& {6 u, \ el: "#root",& t" H! z7 H7 U$ B
data:{3 H O, Z" G5 |3 f7 r- y3 w# T
show: true, U* y& y5 Q+ q6 K: b: k
list:['plm','home','I','love','you']
1 q9 z8 t" A5 L/ b2 q },
6 D' K: j: ~+ Z methods:{; j, I2 }7 Q' U8 x; \
toggle:function(){
. x* u* v- H8 R! Z) X3 z this.show = !this.show;6 D0 M! o+ @! M& A% j6 K
}
5 o( d; v* ]( b" K2 p9 S }
. d3 P! m+ P7 \ })
5 @# q1 [% _2 q+ Q, | </script>1 e0 o4 R5 L9 |
</body>7 p& [$ W* Z; [6 u- C( U& R
</html>) }$ t% [# i ?! Q; H3 R
, {+ P- ]# u9 }: }2 M
5 t" B5 {. T0 e4 M |
|