|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
- t% d7 ]0 [3 d8 w
/ b& v6 R U1 `3 @" f
7 o4 J* \( ]7 F% s9 h<!DOCTYPE html>8 c- y# ^' l5 H; F6 E
<html lang="en">5 O3 {# u. W: E K
<head>
! J; X& ?* c% Q7 G4 J, X <meta charset="UTF-8">8 y. R9 L: @$ J* E! t
<title>Vue JS V-show, v-for,v-if</title>( z$ `: i+ _; t5 J; t9 `) |
<script src='./vue.js'></script>& s" H0 `5 U/ m) |8 ^
</head>1 o9 X8 y9 f$ ~ J
<body>4 U1 B! e/ H6 B* k% k6 ]" C0 r- V
<div id="root">0 Y( K( X6 N: `% N
<!-- v-if delete the dom% }$ ]$ A4 K( [. X# }' f
v-show just set the display:none --># @0 N: c' w% c$ f4 h. [5 X3 Q$ s
<div v-if="show">hello plmhome</div>
. m. W! D5 l! u7 f9 a4 J) Q; V <button @click="toggle">toggle to display</button>
* q$ y [: E1 U; ?( }/ b% V% J/ A. S: V2 t" V
<ul>+ |: v I, x7 J2 f& P
<li v-for="(item,index) in list" :key="index">{{item}}</li>
9 W) U6 W) X+ { </ul>; ~6 p8 c2 _+ x& p, N
- Y: S( p1 a/ K" p) [ </div>/ @6 S6 f- J+ {" Q
+ A, `) F0 S( u$ Y, h
* K# w( S* C( m3 d. `3 p& v
<script>& C4 V( W1 {; f- E5 z u" Z
new Vue({7 d7 M/ B' e) v0 H8 @: K. _
el: "#root",
/ v" P a9 G0 C data:{
" n0 p) {8 s( m/ ?, j show: true,! L! X4 N4 w8 a
list:['plm','home','I','love','you']! F0 L6 @$ V% J3 V! N
},) @: K% {" f& r+ a8 ]
methods:{
3 o% X' V4 q( K/ g5 R: Q; p4 w6 A v/ l toggle:function(){( u, a6 H ^4 X/ N* G3 V
this.show = !this.show;- g `! m, E: [$ w! R; I
}) j- ?9 \& U# u$ Z; H9 P% q2 M
}- B1 c( T8 u1 v2 e
})
" ~; t1 s9 q% ]2 t7 u! A </script>- p) J! D" h$ D& N% F& `
</body>
6 D1 u2 A; ~, H4 W4 k! c+ c r</html>- i* @4 m8 n7 w4 e( W( E) ~
$ H, i" H* y, I
$ v( R! K) @1 C |
|