|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
! K- w, D% i: F2 @' \# n, m: ]0 ?2 V' @& N& O0 u: L
! ]- i* E& D7 h5 s
<!DOCTYPE html>
! G0 x* j P/ ^( N u! G<html lang="en">
6 I) m8 L$ J( k$ P. H" M* T9 t# M <head>$ R6 k# t. V J/ X' L" F6 k4 @9 `% y
<meta charset="UTF-8">
$ A; [9 s, n3 l2 N9 v <title>Vue JS V-show, v-for,v-if</title>
3 Q) @6 p e) M" u* N0 O4 i+ U/ s" a <script src='./vue.js'></script>
$ A/ u( h& o$ H, [ </head>7 h& B& s# e) X) C
<body>8 n. ~6 l R7 J6 q# ]" z
<div id="root">
2 @( O' [% }) v* F1 {/ O! S <!-- v-if delete the dom
- R; k1 ]( D6 i5 G4 ^. \7 ?5 R v-show just set the display:none -->
& C% M9 ]4 U. Q) u9 p& i8 _ <div v-if="show">hello plmhome</div>7 x7 U( K( w# R& C( Q0 K
<button @click="toggle">toggle to display</button>0 I: T% }2 d7 b4 J
3 W3 J8 y: ^ k( J <ul>
7 `8 W% v5 E8 t$ Q( x <li v-for="(item,index) in list" :key="index">{{item}}</li>
6 I9 V8 h9 x- b </ul>1 W4 N; E3 m) x& o3 Z: |6 ^$ j- l. e
" B4 F7 K9 X( {+ b, c% I
</div>
4 x4 T- _- ^+ j- Q t7 A# b$ h* \* O
1 b. h! H/ U* Q1 ^ <script>" U2 s% i. i" f
new Vue({
& q1 P) \1 W' s0 U# H9 h0 @; T el: "#root",
2 {0 }6 T# g* F5 U. p' U data:{
' M3 Z# n, I( A9 @9 Q: j4 d4 N show: true,
' f) k* C8 W5 z8 v list:['plm','home','I','love','you']
/ ]! p4 b) ~( Y: d1 C },
7 R9 W7 u5 U& g+ P3 @& u" ?* [ methods:{
* z0 X/ u7 t) ]; e! V p7 y! I toggle:function(){
7 P- a) r1 p5 t$ w5 V/ G this.show = !this.show;" w8 `% P* z6 {- N
}3 f+ }% D* G6 `; L5 m
}
9 S, t2 ^: g6 q! s1 \2 s3 J })
3 y- [5 |" s: ?( \1 ` </script>
" f3 i: _0 t' F8 W( Q </body>) P, o/ M. j8 T7 m1 {+ t3 q
</html>
& E# p- u3 n/ [& F2 J m& T3 ~
; K9 b6 u& ?6 B3 @! T) w+ L; ~6 q$ ~2 G8 c4 ?
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
