|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
3 V( k0 q9 E( u" S r% r% M" v
% ^0 L7 \0 Y# H3 F( ^4 l
/ X( _& d6 I, R+ S( k- x<!DOCTYPE html>
( S( n( w0 \ T' c. K |<html lang="en">8 O: ~0 C# Z8 ?5 \
<head>0 [, V8 t- K0 s5 q6 n
<meta charset="UTF-8">% S8 Z {- Y$ W( ]. M' H7 C2 J
<title>Vue JS V-show, v-for,v-if</title>
$ y2 p1 j' \- \, J <script src='./vue.js'></script>
U% E* E; A, X) Y# e </head>
: U& T1 P$ {7 e9 W <body>
* a/ G( L; Y: X& u7 i <div id="root">
- b* j8 q3 g* w) T <!-- v-if delete the dom2 ?$ k) B* @- Y; l+ \
v-show just set the display:none -->% { E" ~% N3 I2 }
<div v-if="show">hello plmhome</div>
4 S" c: q4 ]' X) s7 W9 p9 K <button @click="toggle">toggle to display</button>
6 u, ^$ O W9 N; l% L1 \
- S2 g! k5 A. ]0 W' \- D <ul>
5 A, I: Z( K2 b# `& D <li v-for="(item,index) in list" :key="index">{{item}}</li>* e7 K( L& }9 }# M& G
</ul>! A4 k# N# q7 A) B- L
& s& \ P# V0 V: J7 o% j </div>
* O1 { h. R' q* B% n5 ^0 H% H9 S/ I
' U; w+ X2 x0 R: `
<script>
7 W+ P6 K1 U3 s7 |; _ new Vue({
$ d/ u+ Y5 F0 L4 r el: "#root",
# x9 f( d# e+ L4 h& G; w2 Z data:{
5 C; Y. B0 h* v6 t show: true,
) y) z$ s7 e8 I) B9 H6 m) D; M6 G list:['plm','home','I','love','you']4 u5 M+ _* m( t
},8 w! C* s. T( Z; \" M, g
methods:{9 \! M* W: M5 g5 D
toggle:function(){0 I/ t5 C% C( G" k; z f" k# |
this.show = !this.show; ]& H( ^' S' `0 R9 \
}
+ H7 A% H$ S2 m* f }
a0 A! i: M% k/ o })
! x9 U% }4 C, E7 J8 j& ~ </script>) w: O/ _. x' i6 i0 S7 n1 u. z
</body>" w+ U: Y. K5 K
</html>
5 }0 _$ U& Q: a5 V8 q2 P7 \* G4 }9 @3 }/ V, }
5 r7 d( ^, d9 K( a) w7 r
|
|