|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
/ K% U2 j6 j, A. U7 \: @! h
1 P3 w9 r. V% r6 b' q5 c3 o* ?$ E! W A
<!DOCTYPE html>! x1 x2 q) E0 u& z! {
<html lang="en">- H; ~3 Z) ]) I. |- o6 x( f' E
<head>* a8 b3 P3 |: ^0 l
<meta charset="UTF-8">
5 U0 ~5 C, X" w- g( h: L" ]: `- V <title>Vue JS V-show, v-for,v-if</title>
) R( }' }/ |# A0 G; ^ <script src='./vue.js'></script>0 ^8 t" G6 w3 b) ] C
</head>; T- Y& ^4 Y* q6 z
<body>
0 b7 K4 H- R/ F <div id="root">$ a$ {- _2 p& J7 G l% m5 g8 ^
<!-- v-if delete the dom
- b: w3 p+ G- B# W" p# P. m# K v-show just set the display:none -->* s$ W/ I( A$ V$ Q# D( W
<div v-if="show">hello plmhome</div>9 G$ Z7 w8 z4 Y9 k. Y1 r+ @2 T' U
<button @click="toggle">toggle to display</button>
/ T! n/ t# p5 P9 C. A7 k v) x2 n3 w/ s0 g" l* N
<ul>
8 K2 O4 E0 D0 B/ |8 n2 K# L7 v x1 t8 O <li v-for="(item,index) in list" :key="index">{{item}}</li>
+ |; q* ~8 k, O7 C1 g/ s/ p </ul>2 u. A9 U' e% K* b8 R/ Z p
: j* t" ], _) ?$ B' a. r. ~
</div>7 W; x F) L- s5 d2 }
/ X0 m. a) W8 k2 e* X$ E9 T
3 j$ Y# t* S- _: x1 z$ a <script>
1 a5 q5 }$ g5 [# B: b, g$ |- O: W new Vue({
0 b) H% O7 v2 h) `$ ?9 k4 M' u el: "#root",! I2 e3 I0 Y2 j( F3 M% N& y
data:{
' {! b7 x- C. f0 H4 z show: true,
0 P6 V* M. Q( c2 X6 S% E' Y list:['plm','home','I','love','you']3 d. N" g% _3 f
},
0 \7 u$ z6 l* _" f/ ] methods:{& e8 T( d$ i+ n( y# x
toggle:function(){
/ [8 |$ m. W* ?( z! g2 E4 ` this.show = !this.show;$ s' a/ G6 \8 }: W3 C: X" Y
}
: S* t0 p! i# x' F e }
! l# `: _5 y6 C7 e: C+ l# E6 H }); O( X6 u( v" l0 X1 ^) r9 }" `
</script>
. I9 f% ~; w6 Z" }9 D7 A </body>" U* \: ` O) z7 _1 t; N
</html>
- z7 l: x' w* S, w8 v8 ~# e" r/ X( P
# I7 P X" A4 ]& n2 l
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
