|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
: x$ D; O, y* A2 B
1 V9 t9 `" u L$ }) N. [- H; d" K" l; e H: f$ d% g$ K
<!DOCTYPE html>
! w' U/ y' D/ Y1 ~' @- m<html lang="en">
7 p( R1 L- T+ U' B! G" _ <head>) @7 X5 u, @5 C. a6 n3 G8 a. x/ C) r: |
<meta charset="UTF-8">
* X. ~( L3 h& Z! I* u <title>Vue JS V-show, v-for,v-if</title>; i4 Q6 Y7 S, k% Q8 R
<script src='./vue.js'></script>8 \! P6 E7 d& J& C9 a0 J1 l/ Y/ ~
</head>
" @ q8 A9 N6 h' [, A/ _( Z <body>
6 @9 L+ W* k8 U( q4 @ <div id="root">
3 A2 O" o! F& t1 v. ? u <!-- v-if delete the dom, ^+ B1 G7 ? c0 S
v-show just set the display:none -->
$ h! W1 q8 B1 Q- L: M8 x* d <div v-if="show">hello plmhome</div>& S( E: T+ S3 E# v- E& _
<button @click="toggle">toggle to display</button>
s `" W8 d( k8 T
- r7 D! c$ A+ Q6 S8 a/ u3 o <ul>
8 ^6 L8 h, V! J1 u <li v-for="(item,index) in list" :key="index">{{item}}</li>
) b; S3 N$ @ J* c) Y </ul>% m' s, i+ v& _5 l0 v
) a7 `" X, {) [
</div>2 H3 X7 y# f' U; x: |
7 P- O6 v8 F0 m8 ^
5 Z! j% o2 r8 t( z
<script>
: F# C0 c0 y$ j6 a9 _/ c2 C1 W' J new Vue({+ W! _+ p% U: u
el: "#root",7 p6 V, G: H7 ?
data:{
. Z2 C, {5 e* _ show: true,
0 H- P+ T: s$ O0 X# A list:['plm','home','I','love','you']( ~% K9 X3 y' x* u+ N
},- Q7 [0 ^4 V M
methods:{
' D, U- e* f2 K- Z: C8 t3 A% |% e toggle:function(){
0 t$ `! z8 ^2 e% b; [: w3 @/ H this.show = !this.show;
! ~( z+ J9 T9 x2 N5 h, d }
! ^* t7 q, [+ I! _; Y% H" o# O }
1 w* _! f1 \' K6 v0 _- v- h% J })
- a9 K L% a7 t; B5 e' R </script>
9 N/ ~, H6 i# o2 I5 @ </body>; U: S- W& n- F/ Z
</html>) e3 w9 s; e8 {3 [7 x3 g
9 J( r* v; ~1 q/ G
2 l8 q. L' w+ z5 k5 D% p
|
|