PLM之家PLMHome-国产软件践行者

[前端框架] VueJs V-show,v-if and v-for

[复制链接]

2019-8-7 09:56:07 2070 0

admin 发表于 2019-8-7 09:56:07 |阅读模式

admin 楼主

2019-8-7 09:56:07

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x
2 q3 F0 ?* J9 m

/ T: P6 ?) C. ^7 @
6 S6 `8 o6 N0 D9 k/ B: p  F<!DOCTYPE html>
6 K  c" o0 ]& A7 ?- p4 z<html lang="en">
5 v3 ~5 `( k! D- _! T( I- I    <head>
* f5 f8 \5 w, ^) Z3 d6 v# \        <meta charset="UTF-8">% w9 C1 z9 H6 ~% x5 X9 s
        <title>Vue JS V-show, v-for,v-if</title>
" ]6 [0 j  i5 Q- g        <script src='./vue.js'></script>5 M2 K1 ~! g; r  d& ]0 ~* M
    </head>% c( f0 W& S, A' D
    <body>
: c8 z, R. H3 R) _8 E        <div id="root">0 n+ A4 i5 f8 M# R) O# A
            <!-- v-if delete the dom
3 z! ~( u, Q) A# d  |, V            v-show just set the display:none -->9 `8 v% a5 x  v: ~+ C! w& h
           <div v-if="show">hello plmhome</div>2 _2 Q/ c! M7 U" l* n
           <button @click="toggle">toggle to display</button>
) q! K; ?7 S6 v7 ~
. Q/ Z" C9 v9 a, q# S3 C$ R           <ul>6 H" Q& q' o  E7 O5 F5 }
                <li v-for="(item,index) in list" :key="index">{{item}}</li>  m- |; ~; U9 v
            </ul>
6 e% C) h' q6 `+ I$ n7 e& H& X6 [6 K, u# G% o1 O# G& N# F3 l4 A1 _
        </div>1 V0 Z" q5 p- `9 t

4 J  f) Y6 W+ @8 r8 J6 i$ c  {1 k
        <script>
3 U7 |4 c0 c0 c0 ^: J2 N4 P        new Vue({
7 V1 S6 C1 h1 `% K) A" x            el: "#root"," X6 R- E5 R6 P
            data:{( H' W; a3 D- R
                show: true,
% {/ b. O8 L6 E& ~; R' v                list:['plm','home','I','love','you']+ z' @: m+ @9 _! @" A+ m
            },
* l* }& t+ T4 ?0 c# b            methods:{
( t4 }. ~1 I* H2 j7 I2 _               toggle:function(){
& T, o' w  H3 W. S0 d5 v# c, G                   this.show = !this.show;9 Q( p, ~% O: Y. n8 \
               }4 ~; Q* {, s, a  x+ B6 _
            }
+ I6 ^9 E2 p3 ?9 |% c, k) k- u        }): k& R/ O. p; t- B
        </script>
1 r" Q: B: @# O! l. u. L    </body>+ L( r  w8 W7 z* ]. I2 I4 d" P. Z
</html>
% B4 T! v; {) y' Q
: h# `* ^" S" h

7 F+ j2 i1 M  H# m" n) J
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了