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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x
- t% d7 ]0 [3 d8 w
/ b& v6 R  U1 `3 @" f

7 o4 J* \( ]7 F% s9 h<!DOCTYPE html>8 c- y# ^' l5 H; F6 E
<html lang="en">5 O3 {# u. W: E  K
    <head>
! J; X& ?* c% Q7 G4 J, X        <meta charset="UTF-8">8 y. R9 L: @$ J* E! t
        <title>Vue JS V-show, v-for,v-if</title>( z$ `: i+ _; t5 J; t9 `) |
        <script src='./vue.js'></script>& s" H0 `5 U/ m) |8 ^
    </head>1 o9 X8 y9 f$ ~  J
    <body>4 U1 B! e/ H6 B* k% k6 ]" C0 r- V
        <div id="root">0 Y( K( X6 N: `% N
            <!-- v-if delete the dom% }$ ]$ A4 K( [. X# }' f
            v-show just set the display:none --># @0 N: c' w% c$ f4 h. [5 X3 Q$ s
           <div v-if="show">hello plmhome</div>
. m. W! D5 l! u7 f9 a4 J) Q; V           <button @click="toggle">toggle to display</button>
* q$ y  [: E1 U; ?( }/ b% V% J/ A. S: V2 t" V
           <ul>+ |: v  I, x7 J2 f& P
                <li v-for="(item,index) in list" :key="index">{{item}}</li>
9 W) U6 W) X+ {            </ul>; ~6 p8 c2 _+ x& p, N

- Y: S( p1 a/ K" p) [        </div>/ @6 S6 f- J+ {" Q
+ A, `) F0 S( u$ Y, h
* K# w( S* C( m3 d. `3 p& v
        <script>& C4 V( W1 {; f- E5 z  u" Z
        new Vue({7 d7 M/ B' e) v0 H8 @: K. _
            el: "#root",
/ v" P  a9 G0 C            data:{
" n0 p) {8 s( m/ ?, j                show: true,! L! X4 N4 w8 a
                list:['plm','home','I','love','you']! F0 L6 @$ V% J3 V! N
            },) @: K% {" f& r+ a8 ]
            methods:{
3 o% X' V4 q( K/ g5 R: Q; p4 w6 A  v/ l               toggle:function(){( u, a6 H  ^4 X/ N* G3 V
                   this.show = !this.show;- g  `! m, E: [$ w! R; I
               }) j- ?9 \& U# u$ Z; H9 P% q2 M
            }- B1 c( T8 u1 v2 e
        })
" ~; t1 s9 q% ]2 t7 u! A        </script>- p) J! D" h$ D& N% F& `
    </body>
6 D1 u2 A; ~, H4 W4 k! c+ c  r</html>- i* @4 m8 n7 w4 e( W( E) ~

$ H, i" H* y, I
$ v( R! K) @1 C
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了