|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
}5 ?5 ^: Y7 p, L
3 N$ H8 g/ x0 Z. j2 R: N/ h
! S1 P- w ~1 \3 w' X<!DOCTYPE html>8 m3 C3 c( ]! A C3 \
<html lang="en">
8 [8 C' \$ l7 r1 n <head>
4 ^- q3 c$ j# f" H" |$ z <meta charset="UTF-8">& Y; K" C9 }9 y } ^* J- n# y
<title>Vue JS V-show, v-for,v-if</title>7 v. P2 f3 p8 X4 h* S% f
<script src='./vue.js'></script>
: K, |0 c7 }8 f* Y% ^* u </head>1 a/ g' Q3 b8 B0 w5 x. q0 ?
<body>
% y4 ^4 {+ k4 M! @* b! F- D2 z4 D <div id="root"># U7 V A2 Q# T$ t6 a$ U9 w
<!-- v-if delete the dom
6 O7 m1 ?# ~6 r ^! S! c7 z: [* F v-show just set the display:none -->
9 e& p' b! Y( y9 e <div v-if="show">hello plmhome</div>
1 X( B4 S B6 B: O/ \ <button @click="toggle">toggle to display</button>5 |: W! S1 Y3 b% o, a. p$ m, O
" f3 {1 ^6 M/ {4 x5 k* [ <ul>
; A8 H2 u" o9 U$ z' | <li v-for="(item,index) in list" :key="index">{{item}}</li>
* V' F- C4 ], u2 W* w$ x9 y' R </ul>
5 ]$ t% j, T, K, r6 L+ l
6 O. }6 S4 i' k2 ` e# ^ </div>
8 Z3 x! p0 x% B. |4 H0 `! Y. S2 Y
4 I, Q% n( D' S$ j7 i <script>. N, j4 M# L3 F! ]5 _% ~1 }( R
new Vue({6 ~3 C" R6 R; H3 S$ y9 c$ `9 L
el: "#root",
9 c+ q0 V& ~: ~5 ~5 s% X data:{
: k- [/ o& W% h3 n& N show: true,
9 S q3 {6 _2 I% W( P7 [. w! D list:['plm','home','I','love','you']. G1 u9 y% C7 }8 A( v/ |0 k
},
6 R# N2 w1 O" O4 ?3 u( k) l" n methods:{9 P( ~/ x7 Z O% p
toggle:function(){
2 @. Z. {1 p _, o this.show = !this.show;
; O$ a" p; z$ ~ Q; v+ e }
' J0 D0 M9 P6 }9 Z J5 B }
/ c2 @" u) j! E2 s# t! Q2 S })
3 T7 @6 Y$ {1 @ </script>) ]3 B4 K* ]# `7 f' F' N
</body>
7 ^, p7 m# }) A: K0 [* p</html>& \2 R6 [% z+ N! x. X& j* d
, f' H3 Q. m z9 c* G, p0 ?+ v( q" E t: X2 j1 q5 ^( R- ^/ v
|
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
