|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
4 W: \! h. Z9 P, Q" ^& i0 @4 z& S( U) t U/ ]: M
! B( C, s- c c. D5 n$ ^7 t& @: O
<!DOCTYPE html>
' ?" {3 v$ J/ o<html lang="en">$ y0 e+ A: c' L1 v1 u% D( l9 o8 e
<head>
6 ^) F% ]3 o, }7 g! ]. y <meta charset="UTF-8"> e. w5 n5 H: P O0 F
<title>Vue JS V-show, v-for,v-if</title>
1 ?( ^4 o) h. k! ] R' U <script src='./vue.js'></script>
& r2 m' b) I, Q </head>
2 E* W/ G u% \& u <body>1 I" J# O, a' y
<div id="root">
, e$ H# ~3 O6 X9 j$ C <!-- v-if delete the dom" @9 E2 m! V6 b7 Y8 L# w* `
v-show just set the display:none -->
$ ~3 G0 I$ H$ m4 g <div v-if="show">hello plmhome</div>
7 L3 _2 P% s+ V <button @click="toggle">toggle to display</button>2 U% R) N, R7 e P
& \. z" H& {1 [8 s; P
<ul>
( Y" }6 }1 G8 b* T7 p0 j* z. U5 N2 O <li v-for="(item,index) in list" :key="index">{{item}}</li>
" C. m3 z+ B- k4 G- d5 M- D </ul>
' i& C6 p& O1 I, a1 d$ |5 m8 \
% h/ h# w C, W1 l' k0 G </div>
" Z1 a( |, K$ }
6 G2 ]6 F1 k/ Q$ X$ u- p6 Z1 p7 X. h$ J6 }
<script>
) ~) B3 ` N8 O2 y- X a new Vue({ ^ j3 {+ a# o% R1 o
el: "#root",
: T7 ^$ {! a9 ]: F data:{
k% x1 w& U( `' f2 d- n show: true,
/ b2 `& F9 p! o: w6 Y) y list:['plm','home','I','love','you']
4 ?; M5 W& L' U* h* R6 R },
" X9 _. b Q3 b* P$ L/ L methods:{
5 `. |* J- r- t7 C% |6 X toggle:function(){
3 K8 o/ J/ Y+ _% Z( j* a- G this.show = !this.show;" t. O* U+ V$ z* w o. G3 g
}: b. l; w+ b6 x9 C
}" }7 E$ d2 S- R1 X( A
})
) V+ H* p- F4 d. I7 e2 d5 J4 ^) D </script>9 S, C/ \8 l+ x$ ?% F8 g: ^
</body>
% G. o, ^& z+ L/ Y C3 I' r) I/ D</html>% J y* J1 l" D, D
' e- r! i% O4 A2 |; {8 A4 H4 a9 k3 Y% }5 _3 Y' r
|
|