|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
) ] E% l9 A# [# H8 S# W& @" N. A& |! i$ s2 L# J; s
/ ?+ [$ N6 b: g# t! E7 h+ M<!DOCTYPE html>' J2 F5 \9 o& Y
<html lang="en">
( h3 h8 F' ]( g) A# Y <head>9 d; p. U# L- i d& m( ?
<meta charset="UTF-8">
, \/ H! P& Y; t v( i <title>Vue JS V-show, v-for,v-if</title>
! F5 J1 w; ?9 w9 o3 o. Y" w <script src='./vue.js'></script>
9 c) ^5 ^ d, O </head>
) h: h: R- ?1 Z% q4 l- `% \ <body>
- e2 T' |' l0 u2 k <div id="root">
8 [) x8 ?$ u5 n) A2 h4 Y' r' ` <!-- v-if delete the dom
! |. r, B. V8 G; R+ M v-show just set the display:none -->
q+ f+ r+ o# |. X! j. U3 U( I <div v-if="show">hello plmhome</div>: H& v7 v0 N/ N1 O- f: D/ w
<button @click="toggle">toggle to display</button>
% @$ S6 G! c$ b4 C8 r8 w4 O1 M0 _6 T' p- ~
<ul>- Y4 B' b& z# j. j3 m, h d
<li v-for="(item,index) in list" :key="index">{{item}}</li>
* `( M+ S+ X% w; K% G9 s4 C </ul> G+ e& k- X' C% \
" l, F' y' O% W
</div>
( @3 W" q0 O0 c5 w
, ~4 }. k" Z( x9 D. Q6 W+ O A5 G/ ~" C6 t
<script>
* r: A$ ?9 e5 l- c8 j new Vue({
/ m( C) D5 X- [ el: "#root",+ f C4 M( G* o8 @7 u" e* e0 ?
data:{
& h# P; d, K3 E9 i show: true,. a, E" k# G Y( e" |, g
list:['plm','home','I','love','you']
+ ], E; n% v: I; d },
2 B, E# L s! Z0 [% a2 i6 J methods:{
5 i1 c7 j! L6 J5 z' T4 I toggle:function(){
5 w7 Z6 X$ d' V this.show = !this.show;( ?. ]6 Q7 c+ e+ a. d9 h
}
( L9 }5 U7 m- e5 ~ }
/ x6 V: s; S4 T })/ S3 v B4 J9 u" j
</script>( B3 P* Q! @+ P; z
</body>
5 D$ m' s) j" s, v% I2 Q k9 D/ @</html>0 P% b. G) G& q6 b5 D. M
# T3 Z4 `7 @& L9 q2 Z) i
0 C' [' j, j2 o5 e* {
|
|