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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x
9 G( d/ L- k1 V$ o  o0 A

* W6 P6 B0 ^/ o) t( L0 t$ `! J' i9 ?, ~' _. i4 ~' Y; X
<!DOCTYPE html>
; ]7 |4 B# I+ U6 K1 o5 @5 m8 d0 l5 w<html lang="en">
# f' ?/ k; l0 u) ^5 M    <head>
% Z5 q' P5 t; |: u+ c9 L5 @        <meta charset="UTF-8">
$ V$ F5 R+ }) m0 ?' ^7 m        <title>Vue JS V-show, v-for,v-if</title>
3 V4 O. V+ A+ A        <script src='./vue.js'></script>
! _, }2 i; i5 M    </head>
$ q! X) B" n) a$ ~0 j    <body># @+ b9 h8 R: h4 c1 v8 t- }
        <div id="root">
* t; r: F' `( x            <!-- v-if delete the dom
! Y2 k4 a+ w, m            v-show just set the display:none -->0 \$ h* B2 n- H
           <div v-if="show">hello plmhome</div>
& u. f6 c1 G( Y2 r1 x% q0 z           <button @click="toggle">toggle to display</button># E* T, z% @  o9 u3 f3 [5 L0 |

! G. q2 v, R# s! \5 I( I0 w3 y: T6 _1 Y           <ul>
- k# T& K5 P6 K                <li v-for="(item,index) in list" :key="index">{{item}}</li># _0 {6 r6 {, w5 z
            </ul>* J: `  K) _7 Y7 ]4 R7 a2 a

2 r1 c4 e" Y" N/ V        </div>
/ Z" Y- b% ^0 d+ n+ E8 K- j4 w3 C1 v9 ~6 p# I9 S

/ \1 f9 G9 O) t6 L& o        <script>' K8 q6 ^/ _6 U. K8 R( E4 ^6 i. w
        new Vue({! v  m  e6 s% B" U8 c
            el: "#root",1 h+ N# m6 T7 ?1 G4 X
            data:{& x! O( U% h# y- C, z
                show: true,1 ^3 x. c: L& T. X4 o
                list:['plm','home','I','love','you']. D  y9 X9 w  ]; v
            },* z1 G8 U: T6 q) x5 I
            methods:{
% T2 ]2 a. f! g" G' l- c$ [; c$ _               toggle:function(){+ {/ p2 ^& Q+ j$ X. M) A" L3 ]1 Y
                   this.show = !this.show;
( W0 P8 `2 `1 y2 I0 m% N# C8 _6 i# J               }
7 c) [) s; P  I            }
+ ^$ Z8 C9 K8 W7 z/ p' i  \4 z5 ^        })- M& N" q$ g# w2 P# T
        </script>% x% }- S' W1 ^2 V
    </body>
6 P( Q9 L8 A1 H) e7 ]" H</html>( a. S. P9 X0 k. G5 \7 _
' z+ R3 k6 [% I. |2 E8 T

- u4 A" ~: b, h, T1 h/ n5 N# ^
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了