|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
- X9 V/ O# I1 T3 q6 a- U
) J) N. T, c$ ?
% i: s6 ~5 B9 I E. h<!DOCTYPE html>0 J# |- O' F; J8 d3 ^
<html lang="en">
( U0 A3 [; G& Z: \: u <head>" o# |& l* t0 d
<meta charset="UTF-8">8 H) A* |9 J: p4 Y" n
<title>Vue JS V-show, v-for,v-if</title>4 s1 G4 f0 c# J' N5 p- a- x- |, g a
<script src='./vue.js'></script>
' k$ |* \& V2 S4 D) _ </head>) M$ m% G0 e! o. y
<body>& ?" J6 ]& g) z9 g6 Q
<div id="root">) M! l& G! `/ v6 ^' ?
<!-- v-if delete the dom
6 l+ o: K5 {4 _% X! j' _ v-show just set the display:none -->
1 Y' T, E8 ?* _) g2 F% ` <div v-if="show">hello plmhome</div>- }8 N, _8 W) T) @; d' m$ S
<button @click="toggle">toggle to display</button>2 Q% H2 q3 F( T/ @3 B
8 G& p' t! s% b+ G; n <ul>3 S) H% r7 l6 K# {4 _/ N3 l
<li v-for="(item,index) in list" :key="index">{{item}}</li>$ I9 x( G" U( f- `. H' A
</ul>7 [& u# _4 }% b7 h6 {3 |! i7 ^
6 w% }+ \1 K* n2 D8 T) C </div>
' k" J: e5 B5 B2 y
3 d# x0 a/ j) J" O% S
. T9 y* w6 O% @. g! d <script>$ O+ R* G' {1 }7 ~
new Vue({( t |6 A# ~) r+ U% Z Q4 Z
el: "#root",
0 A" b. u' V$ l- }6 M& W1 H data:{. z/ g( q) _! }' Z% J
show: true,9 g5 L! [! ^; k% t
list:['plm','home','I','love','you']2 `0 d! m# _4 U- E" `/ W n
},: Z! y% W; l, m' l% [1 D
methods:{
; @8 S x, U; ^9 h y- Y& Z toggle:function(){! J! O* U$ \+ g7 B! v( |
this.show = !this.show;! i& M( b: Z" G5 d0 ~0 Z; S
}
* i0 A& i+ q. D4 Y8 j; \0 H }
: X& L0 B) X% u })
0 A4 N' [" O8 A& @ </script>
+ L8 J8 a: P- t4 Y1 R </body>/ _8 i7 {' e$ x
</html>; ^, L, a1 D5 `$ N. H
6 H* }0 R$ z# e P2 @
! P8 c& u, \5 |; x& I0 t" D" A5 \ |
|