|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
6 K0 [1 L3 ^: x8 V
# Z$ h' \ L3 f
% I& B6 x- Z# K" k% j3 s$ \$ d7 _<!DOCTYPE html>% u; U* K: o( L0 }- i
<html lang="en">) h H' ^' M. c7 x& b+ R y6 h
<head>% f' }/ C( o }/ }4 l T) Y% w* j
<meta charset="UTF-8">0 o8 y8 F9 m7 n* n/ ]8 i# X
<title>Vue JS V-show, v-for,v-if</title>
. L- J/ N; O0 i0 |8 b <script src='./vue.js'></script>( y& r; s) j8 j, K
</head>
: U; W7 C @. o) X3 R' I <body>; u2 w- ~3 e* B8 @( P- N
<div id="root">1 p4 b3 Q3 U9 T# v' y4 j
<!-- v-if delete the dom _; N. E3 L) x
v-show just set the display:none -->
8 q* ]; }0 C4 E; r2 k1 C! p <div v-if="show">hello plmhome</div>) o" `: c* q! S2 u% x
<button @click="toggle">toggle to display</button>
4 j! ?" {: h: i8 O* X8 y0 C" d
$ s5 M3 ? t" Q2 h <ul>
! H" E- \1 ]8 ~0 p <li v-for="(item,index) in list" :key="index">{{item}}</li>
* Z1 c/ ^: Q2 S. N# b! I; } </ul>; M/ \3 `* m' z. @0 T* J+ l
6 d& B4 A$ V/ \; ^) P% A, ]! [
</div>0 A& |& ]( x5 G/ `0 l; C( @
8 h: i$ d6 p. D% H( E W
5 a2 i4 n/ @ y$ e5 A: C2 Y <script>! i( x! a1 X7 N
new Vue({; C2 t# Y8 Q8 L9 P
el: "#root",2 A ]: r2 D# S2 D/ o* u2 r
data:{
8 e2 J( ~$ r J show: true,
4 o4 C5 V6 s. ~! z8 X$ e list:['plm','home','I','love','you']
& O& W, C+ i. C0 F6 Y0 ^ },
, @# q, b4 A8 k methods:{
% s: Z; \- e9 q/ d toggle:function(){, ~# _# p6 e' S X4 x
this.show = !this.show;) o' R- g8 q( c
}
3 a; F" D6 |: i7 E }
' |- t; }* [+ D3 Q/ R; ^ })
0 P4 N. X8 Z6 _8 N o8 r0 J </script>
- o6 m+ o2 r5 r! j a& k- t </body>
, w" N* c1 Y+ e& ?3 P- s/ o</html>
# L- B. x& y5 r' K* T- V
6 I( C' O- i. E/ b* F1 q4 `0 I8 `" F! ^3 O% {; B& t
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
发表于 2019-8-7 09:56:07
