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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x

4 C# t2 o/ F  ~& b7 R. s' {0 Q5 s% n$ Y$ E) i' h  c/ ?2 [7 c5 _( w9 B

9 g& q3 W: g+ `' F- }' J9 d  f/ E<!DOCTYPE html>
! @8 u' w( `' R! b& b6 ^; |- ^<html lang="en">
! o9 j; I3 l) c7 H3 R% L  W    <head>) X( \! X2 v+ `  v& u( [
        <meta charset="UTF-8">( s/ M4 q. q9 G
        <title>Vue JS V-show, v-for,v-if</title>8 ?& M" w$ R* N9 R/ m9 ?5 y: D/ d
        <script src='./vue.js'></script>
) l/ P: m7 J9 S6 v7 f. x8 p. X7 B5 Q    </head>
& l6 Y( `$ m) ?& R6 q3 x2 B    <body>
: d. K$ {2 \$ K$ l7 t" }5 f9 L2 R        <div id="root"># H' S3 _4 Z  O
            <!-- v-if delete the dom- i& c; x# ?; g/ ]2 ?
            v-show just set the display:none -->
6 f2 E6 y2 {) X& d4 d2 v! |& y           <div v-if="show">hello plmhome</div>
. P2 @' E% _  ?5 [           <button @click="toggle">toggle to display</button>7 h3 H6 h: H6 {) j5 T; u

) S9 X2 W( S, \! c           <ul>
7 F+ F0 p$ F& V7 {0 {* F% M                <li v-for="(item,index) in list" :key="index">{{item}}</li>
) y0 n9 C, R% N4 l8 R1 h4 D0 w            </ul>
1 J( V( N2 v' Q8 u  e
7 f9 U, U3 a3 r5 n4 U" l        </div>
8 `2 H* M3 l2 ^
5 _: e/ C3 p: z  f. e& m7 N1 v  V
        <script>
5 J# }( r+ }& W4 B, h: Y        new Vue({
- \! U, G& {6 u, \            el: "#root",& t" H! z7 H7 U$ B
            data:{3 H  O, Z" G5 |3 f7 r- y3 w# T
                show: true,  U* y& y5 Q+ q6 K: b: k
                list:['plm','home','I','love','you']
1 q9 z8 t" A5 L/ b2 q            },
6 D' K: j: ~+ Z            methods:{; j, I2 }7 Q' U8 x; \
               toggle:function(){
. x* u* v- H8 R! Z) X3 z                   this.show = !this.show;6 D0 M! o+ @! M& A% j6 K
               }
5 o( d; v* ]( b" K2 p9 S            }
. d3 P! m+ P7 \        })
5 @# q1 [% _2 q+ Q, |        </script>1 e0 o4 R5 L9 |
    </body>7 p& [$ W* Z; [6 u- C( U& R
</html>) }$ t% [# i  ?! Q; H3 R
, {+ P- ]# u9 }: }2 M

5 t" B5 {. T0 e4 M
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了