|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
( r3 ~) ?. M% Z: _* I5 [: X' s. m- t; f; H7 t @
. g* J) W: k/ C/ F5 X4 p1 D( o0 y1 ?4 Z
<!DOCTYPE html>
# v$ C" w y6 Q& _2 A6 q1 L8 A, @7 [<html lang="en">5 ]% e+ c3 i5 j$ M4 \8 d) b* A G
<head>
4 E. z& @8 S8 ]8 ~+ \6 ~ <meta charset="UTF-8">0 h9 f) |1 [* M& K: h
<title>Vue JS V-show, v-for,v-if</title>5 w B8 y% ~( j7 ?1 C* A
<script src='./vue.js'></script>6 P6 x$ q/ R' H% D- K8 g8 C
</head>
; P& m5 a7 }4 O: H: P3 s <body>: H1 k/ b M; H2 l
<div id="root">
2 H* ^/ U; ?# N) Y. ~ <!-- v-if delete the dom
3 G7 V% ^- @) I+ x4 [5 s v-show just set the display:none -->4 n4 Z4 A$ i! S+ M
<div v-if="show">hello plmhome</div>& ]% B: ?7 C9 {+ Z2 B. X# T0 r
<button @click="toggle">toggle to display</button>7 b/ w* f- n$ q+ y( c$ |" J7 f2 S) C
! r% |7 _* o/ C9 }' `; `5 @4 l
<ul>
$ M" ?* x: a( S4 j+ y9 r9 e- d, h <li v-for="(item,index) in list" :key="index">{{item}}</li>$ g! M' I. ~' ?- S
</ul>
; b( t0 I: _! Q3 C: d' M4 j+ G
2 p5 L/ Y# r8 Y7 `- o9 c6 h" V) m </div>4 W2 l: O& `& P. b& S
* v3 `; u9 w/ J$ [$ Y' B8 \
% k" X, L( s, s7 ~; M7 Y& E: S% J
<script>1 L) v6 M: i1 A$ z
new Vue({1 J; q8 n% r A# K
el: "#root",
. T& O) p- C- t G' @ data:{# L* K! i2 }7 G6 u
show: true,
# k" h: p: V0 v& z g4 \9 O9 ^. S' @6 J list:['plm','home','I','love','you']
2 V" q2 W: ?' n$ {. I: u( W },
3 F/ z. X; X1 p0 f3 c5 C methods:{2 t/ L) O* {' z$ @9 R" m4 z
toggle:function(){
# S+ n' S" c( j7 H5 ]3 U this.show = !this.show;* d9 K6 f( [+ r& z2 B. s
}
0 f$ j1 K S' e1 X% u! ^' f3 j' S }3 k- @: T5 V2 t) ?; k: x
})
/ e4 c3 d, f2 `! H# [* U </script>
/ _! l5 N4 N# r </body>
/ M9 R9 S& N/ J</html>( Y$ l6 V4 k0 `; E1 D7 t& O$ r' d
. c! q& c( O' s, i2 L( m5 f2 H5 G7 x; e& @5 u, G) Z
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
