PLM之家PLMHome-工业软件与AI结合践行者

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x

5 i* Q. b% R/ P
5 \" W/ t8 m, I0 b
4 j7 ~/ c6 I% s8 \6 [* K( a' K: e<!DOCTYPE html>" N% |3 J$ ~+ A) o7 d& T& @
<html lang="en">
. m7 G  t  e! c/ p6 \$ f    <head>
- P' q5 {- @2 n( q! m/ ~  G* v        <meta charset="UTF-8">" _. M/ X" X9 ?
        <title>Vue JS V-show, v-for,v-if</title>
1 }2 |, O% Y  ^8 N% H        <script src='./vue.js'></script>3 L  {3 L/ a+ l" F: X
    </head>( a# i( {2 z/ @: k+ u" u
    <body>
- v/ z! F( g; |: A, C. ?        <div id="root">& m2 K5 v2 ^7 s
            <!-- v-if delete the dom
$ g2 B+ F2 V  s. O            v-show just set the display:none -->
( @9 @) t7 }$ |6 I8 o0 b           <div v-if="show">hello plmhome</div>
$ u* j. R: ~" B' Q& ~           <button @click="toggle">toggle to display</button>% |; H1 A7 O  W+ C- S1 F- [
! s+ k( k2 D$ V7 r. @. z; k) ?# x9 u
           <ul>' _4 w7 u7 J" \
                <li v-for="(item,index) in list" :key="index">{{item}}</li>/ f) Z4 n  g$ g( m5 A: ]
            </ul>
0 D  }3 y  i9 Z0 }8 r2 K1 Q& m/ j3 S, c$ X/ A4 D* H
        </div>. W* j7 \* m  f/ m

% B5 G9 A0 a# s5 T  y5 a' _( H( p5 E$ E( R" B
        <script>
3 g( r# l( |# C: [  J  h! k        new Vue({
" r  x( ^4 f# q  u4 `            el: "#root",: ~9 ]" r5 U* ]) Y
            data:{
+ A& h7 Q( _9 h1 Y                show: true,
' X1 h0 I' R, e) R* L$ A; h                list:['plm','home','I','love','you']8 H$ }5 T; x2 \, |
            },
8 a7 z  W; x5 `$ }9 O9 A* P            methods:{) G% P! w, m. M' ?2 ~
               toggle:function(){; X& W$ _( M7 d5 j- B8 o  v- S
                   this.show = !this.show;
+ L8 @; A" A  b4 N! C% f& D               }
, E2 I+ N8 {2 i$ b% a2 D" B0 m1 |            }
8 m" w! O2 ]- R* \9 F# x) H        })
8 |( i- ?8 _% g        </script>3 N# w' l6 x; C  }2 W3 q
    </body>* ^0 E; w! w4 B( q7 }( Z3 r
</html>
* y1 P3 R2 Y8 K- V7 a

; {3 z" t+ ]0 h( _# D1 h! a( I) P1 P3 h" _4 x. Y6 V* _0 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二次开发专题模块培训报名开始啦

    我知道了