|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
; a4 `& T' e7 C; V
! n+ a5 C) T5 r+ |0 J8 G2 X
9 T3 s, I2 A/ v5 X8 t6 r<!DOCTYPE html>0 m4 a D! B/ X+ G# G- e
<html lang="en">
) e- H5 M" I6 h8 @ <head>
. N1 E; W# B" Y <meta charset="UTF-8">: j2 ~* M' [' h; ?3 F0 n' {
<title>Vue JS V-show, v-for,v-if</title>* q+ n9 z+ u; x0 W' F
<script src='./vue.js'></script>
. K4 t/ C; \/ e9 \) g( ] </head>, \2 a; G- ^. j. V' r! c6 d
<body>5 r _6 e& ^. x- S. p% {
<div id="root">
- {% b% H2 O0 d5 v7 q# @! x0 Q <!-- v-if delete the dom: \3 i& U" {' s* j/ {7 p
v-show just set the display:none -->
: x' x1 Q6 m" M) ^* e( f& V <div v-if="show">hello plmhome</div>9 o+ j3 i- i R) q
<button @click="toggle">toggle to display</button>
# q( F- E' e4 n% W6 _" j X# Y" ]. o. Q# A! l0 b% ^; Z
<ul>
' H" f( g$ K4 y/ q2 s$ F; { <li v-for="(item,index) in list" :key="index">{{item}}</li>2 u# i: g2 |( }' u
</ul>
: O: ?; T. ~! s0 U6 j3 C9 L5 r) t
; r8 T2 S1 {- W </div>
\. L" H% z1 s+ |; r$ J0 X( l0 H7 W9 p
( N5 U) H0 j) [- Z% s <script>6 a5 u4 \ N3 N
new Vue({
/ K. x+ D) w7 w- H, n" w5 X% J el: "#root",
4 P& k1 v3 K2 e4 q+ w1 H, e& d data:{5 r8 U; a) b. n2 d! U) ~
show: true,' E! s: s/ f. x5 R% \
list:['plm','home','I','love','you']4 B' i0 f1 ? B# ?/ }3 l
},
T) [/ c; ^4 O8 U methods:{
$ [, \0 W3 K8 v toggle:function(){
7 {" o' `8 @: t+ h8 h this.show = !this.show;+ Z9 M- L5 m% R' Z! G
}1 m- y2 }0 K" |8 Q/ ]
}0 x2 V" G* Z4 T( s# R# {
})
4 z: w& f' i7 T5 g7 @ </script>
- Z. g4 c6 C/ n) e- @2 t </body>* ?6 I) k0 R( }8 S7 T5 K$ ~
</html>
/ Y5 A- ~$ C! j ]6 x( C& l& p" j! ?! B6 y
, D6 O* m* l& c( B |
|