PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

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

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

x
  p( x6 J, C8 _1 U9 Z7 _0 ~- e
: e: M. s% q. W0 ]  |: I

* p1 X# B; y5 q+ I<!DOCTYPE html>
  x- J6 P2 I8 v" k8 J% |8 Y( A3 {<html lang="en">
2 l* P4 d' R+ G" _6 Q$ p8 |  s% L    <head>: X8 t9 O2 n' l- v. y" Y
        <meta charset="UTF-8">( F% ]6 D& S2 ]( P# [2 L  ?- J$ R5 ~
        <title>Vue JS V-show, v-for,v-if</title>
7 R9 X4 c9 b. P. X9 V. o        <script src='./vue.js'></script>6 C) K2 i" [# \( v
    </head>
6 f; L5 J" r; U5 O, |    <body>
+ F& R+ }% t7 o2 N        <div id="root">
. F1 w8 h5 Z! e- \5 F& L3 o            <!-- v-if delete the dom) Y7 A3 m: V, @
            v-show just set the display:none -->
6 j5 t' `. D' m1 o0 ]1 N           <div v-if="show">hello plmhome</div>4 ?! x4 X' a' d! ^, u
           <button @click="toggle">toggle to display</button>
5 q) z& I$ z8 z2 M' C9 j
. P# V# m. P7 p1 o+ E; W           <ul>' q6 A! i) b. O- C4 |6 t
                <li v-for="(item,index) in list" :key="index">{{item}}</li>6 n8 \8 p9 \+ u3 }4 k, ~! U
            </ul>/ h3 i! `$ C6 j; }
0 F0 j# b$ Q$ ^- W( t
        </div>
- e" }8 k0 x% c1 W0 n2 [  }& e3 y7 ^9 A" c& `9 _2 M! _. b9 V

) o, p% ]4 d2 K) s/ A        <script>& x% Z4 P& J+ S2 f3 \
        new Vue({
9 J% {! R" A; P  I0 ^8 @            el: "#root",
$ X. k5 c( ^- H* d6 d2 b            data:{
' K) j3 s; c; ^; w7 |- a2 l# l% u1 z8 u                show: true,
5 \, _8 l% Z) Y! a7 E- T                list:['plm','home','I','love','you']7 C% }7 n( M/ z. b; M
            },. A7 F1 t5 B4 B3 h- m
            methods:{. ]# ]3 S7 M$ D; p$ V6 R4 u, {4 [8 R
               toggle:function(){' G, S4 f( `  z1 n1 d- j
                   this.show = !this.show;0 _6 |" f: B; j$ y. B
               }
! I6 d. o2 `8 V            }( _4 D- }" e( \5 r. K7 X
        })9 M' X% c5 Z3 X
        </script># N# W4 j" x: L( p. K
    </body>( l' o- F2 i1 ~4 `  {* u
</html>" V9 z) I8 ^7 i0 M7 j' T0 M" _/ F

$ ?9 y6 L5 T* Z, z( m2 a2 n* |6 N$ E5 L% o3 K) v5 s
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了