|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
' i1 \% U% Z7 q: j$ k! h# [. q$ e t7 u3 x9 z3 q& R
& l- U. G( I" R" E4 L( q<!DOCTYPE html>
, n1 z2 X- x5 @<html lang="en">4 _9 e/ T, G& T0 V
<head>
- i0 H2 X2 Y& [* }& j/ E3 h <meta charset="UTF-8">
: a' |: v& ~# s <title>Vue JS V-show, v-for,v-if</title>8 T, Y4 }) n4 q, Y& o9 z: l1 P) g& {
<script src='./vue.js'></script>
9 ^! o U d' m* l/ B6 z </head>
" V) T' y: L* S# K <body>$ N8 {8 F! u, h$ w. H
<div id="root">% h2 \2 D) @$ z. {( K; U% x q/ C3 H
<!-- v-if delete the dom4 a$ d6 V/ E% ~' A; c
v-show just set the display:none -->
' S7 D2 w; g* {2 y8 u2 Z, V6 e% I <div v-if="show">hello plmhome</div>2 [" t( s3 T2 A
<button @click="toggle">toggle to display</button>( M- k3 D# r1 B9 [9 { d
$ g$ K/ x3 S) j" i) a' ` <ul>' @1 i" L) L$ x2 M
<li v-for="(item,index) in list" :key="index">{{item}}</li>: O- |3 _- @- {# }
</ul>3 K! B3 z1 T; y- p: T0 F% ~8 V
4 Z' s- i8 z1 _! m' ? </div>
, c( y) F# Z. x5 i5 \" n1 R2 C" e, t5 U
H& ]5 n' h- z3 H a/ A& x
<script>; q- S, b/ U& l( |: Y
new Vue({
2 O' y: [7 i, a j2 v el: "#root",
5 D, i* n0 W/ J d" g data:{
3 v9 L+ F0 I6 d2 \; S$ {0 \ show: true,
8 U# R* I2 n0 U; W: X list:['plm','home','I','love','you']
; E4 |2 |+ p: U8 ?$ r },. h5 N- p6 t" I& N* O, M& y
methods:{# w+ b: l/ o. [$ ?
toggle:function(){
2 P: @ {' b, S* G( X0 x this.show = !this.show;$ Y$ V3 Y8 J6 r& Z9 H! a q& K
}
7 s4 _4 M: q1 p0 i# J }
' f" k- T l% F: V' o4 D- p })) ]. B7 m- Z0 Z; D7 u+ Q
</script>2 |4 e& @& k& t- J9 [
</body>
/ W9 m$ o/ U/ z" p6 g: e</html>9 ^, u( `% j! k4 _* d H" P
4 C$ K, o- ^( i( [2 R
4 V, ?8 q+ I" s$ W' q |
|