|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
, F" U% }( s% e( @6 h" y5 Y6 A
3 L& ?' x* ~$ x' k2 f& z" Y
/ E8 `8 \" h( u( u2 A9 Y8 X<!DOCTYPE html>
# H( I( S z1 i7 K$ f0 O<html lang="en">
4 P- P1 d) c) S0 a' N7 x <head>
/ @/ s% [& k7 g6 I N; U9 k1 e <meta charset="UTF-8">
0 H' S0 R# e. s2 l <title>Vue JS V-show, v-for,v-if</title>4 U% F1 ~, t0 T
<script src='./vue.js'></script>
" d% D+ j, H. I* }3 ] </head>
8 F* L7 A }3 \5 p <body>
* w _! F4 ~' r( F1 K <div id="root">
# g1 q# `/ W- i X <!-- v-if delete the dom
& I: w6 [9 O5 e* D( A0 R v-show just set the display:none -->' c4 r* ?4 O* s
<div v-if="show">hello plmhome</div>6 {. a' C4 y L1 i; E3 t' m
<button @click="toggle">toggle to display</button>4 W. g6 F: h, o* v+ ~5 l# m9 l& \
4 S+ Y" W. Q% d3 o5 \7 t) C
<ul>
3 \1 i# l* y; t. H: i- C. t( B <li v-for="(item,index) in list" :key="index">{{item}}</li>
2 A9 w3 T. c/ o </ul>2 c. Y) ]9 O% _
( _, N! d) Z4 D* j3 m
</div>
# H; U$ {1 y+ q" q& y& ]8 f+ f) s7 b+ K2 @. [: m0 W9 M5 s# S
, K2 @4 b/ w4 i: m. } <script>
' C7 g/ N+ o8 y0 Q1 l' `" _ u new Vue({' D* Y3 M$ s% z9 U$ @
el: "#root",
4 n! u' A$ g8 U data:{
, H, C% p* q3 T1 i- b7 i show: true,
% y9 _7 ?/ O* t+ o/ H4 s list:['plm','home','I','love','you']
, c& N) f( ]- U" y5 g ^ },
# ?9 P$ E( g# z7 V& g/ k) z methods:{
" q8 M+ q, d3 H# L. `; V+ Z toggle:function(){
j0 S8 A/ n- p' E this.show = !this.show;
# O) H+ ~) \& W" ]2 U3 q }
" j0 C. Z6 v; n }- }' |, \( H6 L0 d1 n, D$ F
})
% i/ A7 o0 j$ q4 G9 s* F6 V3 f: Y' e </script>
* P$ Y; B7 t1 n </body>
$ U7 K8 l* a4 [* Q: ?</html>' m7 a0 S3 ^. D2 B
+ x( `7 g# J. H, n
0 Y" N6 y' ~# f# v$ O' K
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-8-7 09:56:07
