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

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

积分
82166
QQ
发表于 2019-8-7 09:56:07 | 显示全部楼层 |阅读模式

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

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

x
. r8 L) n. `; P% e

0 c& |( n- J# q9 W4 h7 m& ]8 r+ U5 y, c9 I
<!DOCTYPE html>
# F# J8 i) }2 z' c3 A1 x/ g' x/ K<html lang="en">, ?) r4 V3 _2 @4 y) K
    <head>
, u' a' F& G5 H# u3 T, ~        <meta charset="UTF-8">! `9 i) [4 b, ~9 p7 i0 P5 E
        <title>Vue JS V-show, v-for,v-if</title>
& g; ]  ]; I$ f  F) w        <script src='./vue.js'></script>
  j$ G- K, s$ d' `+ u    </head>
2 D! l1 L: x( c' v    <body>
% }9 Z3 M- k; A9 j$ X. j        <div id="root">- O, d6 @! P1 B" q
            <!-- v-if delete the dom
) \* g& h& |' a: a. m) y            v-show just set the display:none -->! @6 Y; t/ t2 D% \+ V7 f  N6 V1 g" H
           <div v-if="show">hello plmhome</div>
& P6 w% o, }4 a           <button @click="toggle">toggle to display</button>: S0 l& Q2 Z( t' r4 M+ @* b" Y. |

! F3 [6 J) N5 [           <ul>
' I! A9 `1 X. b                <li v-for="(item,index) in list" :key="index">{{item}}</li>8 l1 X+ Y1 k4 C3 ^, w
            </ul># z% U3 j2 J  n9 i
, |* j6 X" s5 K5 J& u# _: P
        </div>" }/ b2 Q& {7 N. D
7 o7 C3 c5 J* v6 S" i

& y* {- T( O' H  {0 s; E        <script>6 d. K& e* G; t' o; O4 a
        new Vue({# W; M$ z$ Z6 {/ g5 j# m6 o0 D, r
            el: "#root",: F+ i! N4 Z' M! `: [5 q0 g$ m4 {. J
            data:{
0 F# e7 g. X3 ?* K2 w! a                show: true,, z8 \' x7 M  {0 N, H  c4 j
                list:['plm','home','I','love','you']+ k* k: k2 n6 Z$ o, u  i! r
            },& h" k' I# U' t; G0 i: u
            methods:{% r( H  O, `- m) F
               toggle:function(){& @" _+ }6 X- o6 T+ }
                   this.show = !this.show;
# j0 N: Q& t* q$ _               }
, s8 g$ {$ L) w+ s            }( v% ^8 e2 C8 u5 E3 o
        })1 \$ D0 m9 F0 p+ B
        </script>5 ?" S* g3 e: }& r/ Z
    </body>. Z3 z9 A; K- P# L& a
</html>
1 `& T) [% l: k  l

9 u, d7 \3 u3 z* }
; {! W. O' l2 A) W
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了