|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
0 |4 t2 [5 ~! ]* a, n O) r) G
1 o, I& M2 E% q) h# W! ^% [0 I$ J6 W! f6 m
<!DOCTYPE html>& m% {# Z. W9 D) L# B- `+ h
<html lang="en"> y _0 R5 ]. i8 X# X; @" P+ D
<head>
, o+ p6 z! c% {* E1 k <meta charset="UTF-8">
% h/ |$ D( F, G" a" X5 Z <title>Vue JS V-show, v-for,v-if</title>
. m4 g; E2 i$ e" F# g$ M <script src='./vue.js'></script>
! b# M. d! K0 L/ N </head>4 Z! X3 P' A) E
<body>+ V/ r5 R4 E# b: A# `. \
<div id="root">/ h1 P. _8 D9 C0 g' o
<!-- v-if delete the dom
9 O6 P, O- o- U& D$ c$ ^ v-show just set the display:none -->
( q. Q6 m/ g2 U! @4 }2 ~+ Y <div v-if="show">hello plmhome</div>) P3 b% y. a0 _0 V7 C
<button @click="toggle">toggle to display</button>
9 w+ a2 n4 Z5 `7 j3 o. Q0 B1 ?$ I
<ul>, P9 H, h- G v) _& L: D J3 D
<li v-for="(item,index) in list" :key="index">{{item}}</li>
/ Q- }9 Z: h! B5 D* Z: z/ Q ]6 {% k </ul>
6 a# e) ]3 T7 }
; q, q& ]4 |1 e, E </div>
6 Y- r) P. t' \' W
5 }/ X* @) k s) i- y( A& y1 I% h2 V6 o( W# G+ Y4 Q4 P
<script>" a0 C& Q* i$ i: Z" Z* t- O+ u
new Vue({
8 S9 o; P. O( h el: "#root",
, z6 ?, {" w9 U% {7 E* N! Y data:{
/ M( W% T: S7 }( t# L3 f% T show: true,6 ]5 W3 z8 J$ \8 ]1 S- m
list:['plm','home','I','love','you']6 X z% J% w$ c7 F3 {* P
},$ l, J' K6 ]6 E, M# s( v4 O }4 ^" i
methods:{! d! ~" [: U7 e$ b3 d
toggle:function(){
8 u' F7 X" g: U* x$ L/ t6 Y& w/ x this.show = !this.show;
- a5 ^3 R5 \# _2 ?: i/ c2 H% H- N }6 T/ ^# E0 {- u$ Z+ P
}
) h5 ?1 T$ f/ i! O! t. u })
3 q: h, l1 f0 Z </script>
, ?; H$ v1 o) m' | </body>
: p% k, }. i) X8 P</html>, f; S i, F) e+ V8 j
9 G' M. b. X9 w. S$ z* J$ c( W: ~
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-8-7 09:56:07
