|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
5 i* Q. b% R/ P
5 \" W/ t8 m, I0 b
4 j7 ~/ c6 I% s8 \6 [* K( a' K: e<!DOCTYPE html>" N% |3 J$ ~+ A) o7 d& T& @
<html lang="en">
. m7 G t e! c/ p6 \$ f <head>
- P' q5 {- @2 n( q! m/ ~ G* v <meta charset="UTF-8">" _. M/ X" X9 ?
<title>Vue JS V-show, v-for,v-if</title>
1 }2 |, O% Y ^8 N% H <script src='./vue.js'></script>3 L {3 L/ a+ l" F: X
</head>( a# i( {2 z/ @: k+ u" u
<body>
- v/ z! F( g; |: A, C. ? <div id="root">& m2 K5 v2 ^7 s
<!-- v-if delete the dom
$ g2 B+ F2 V s. O v-show just set the display:none -->
( @9 @) t7 }$ |6 I8 o0 b <div v-if="show">hello plmhome</div>
$ u* j. R: ~" B' Q& ~ <button @click="toggle">toggle to display</button>% |; H1 A7 O W+ C- S1 F- [
! s+ k( k2 D$ V7 r. @. z; k) ?# x9 u
<ul>' _4 w7 u7 J" \
<li v-for="(item,index) in list" :key="index">{{item}}</li>/ f) Z4 n g$ g( m5 A: ]
</ul>
0 D }3 y i9 Z0 }8 r2 K1 Q& m/ j3 S, c$ X/ A4 D* H
</div>. W* j7 \* m f/ m
% B5 G9 A0 a# s5 T y5 a' _( H( p5 E$ E( R" B
<script>
3 g( r# l( |# C: [ J h! k new Vue({
" r x( ^4 f# q u4 ` el: "#root",: ~9 ]" r5 U* ]) Y
data:{
+ A& h7 Q( _9 h1 Y show: true,
' X1 h0 I' R, e) R* L$ A; h list:['plm','home','I','love','you']8 H$ }5 T; x2 \, |
},
8 a7 z W; x5 `$ }9 O9 A* P methods:{) G% P! w, m. M' ?2 ~
toggle:function(){; X& W$ _( M7 d5 j- B8 o v- S
this.show = !this.show;
+ L8 @; A" A b4 N! C% f& D }
, E2 I+ N8 {2 i$ b% a2 D" B0 m1 | }
8 m" w! O2 ]- R* \9 F# x) H })
8 |( i- ?8 _% g </script>3 N# w' l6 x; C }2 W3 q
</body>* ^0 E; w! w4 B( q7 }( Z3 r
</html>
* y1 P3 R2 Y8 K- V7 a
; {3 z" t+ ]0 h( _# D1 h! a( I) P1 P3 h" _4 x. Y6 V* _0 S
|
|