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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x
" a3 B) m& K1 Y  Y0 s9 |

3 u4 R2 N: X- i1 n/ I
) q: L  A, ?' k) ^' ^2 E<!DOCTYPE html>
2 {2 ^* h0 Q* E/ q8 f, f<html lang="en">1 }3 E5 W$ C" b; u' T
    <head>2 X! e( a" R7 P0 A: `
        <meta charset="UTF-8">* C; w$ b( T( ]/ O+ G% X# c9 k1 n
        <title>Vue JS V-show, v-for,v-if</title>
7 c0 a6 D- R$ U4 s        <script src='./vue.js'></script>
- c' x# @1 T: d* t& }    </head>
) N+ ?: Z* k, l    <body>
8 Y5 ~5 x' o: b        <div id="root">" K" k1 O2 I+ Z2 A0 ]
            <!-- v-if delete the dom3 `7 p% O% [# V6 _
            v-show just set the display:none -->
( t3 {: D+ X5 ], C; _9 Y           <div v-if="show">hello plmhome</div>2 u6 |$ t2 R+ S' y$ ]9 N/ m! i
           <button @click="toggle">toggle to display</button>
; q8 b% W( H3 ^4 x' C9 Q4 [# N
$ ^; ^; G0 Y$ y( U. w" G           <ul>1 L5 U. X2 Y- Q1 N$ ^
                <li v-for="(item,index) in list" :key="index">{{item}}</li>
" W0 n- j9 q. U$ s            </ul>
, p1 k' u/ g7 d- ?1 E9 _
9 t; t7 Y! G+ v$ w        </div>7 D' e* Y/ M- K0 l2 a0 L, z

7 \! {- X  t; ~- n( x6 g  N8 I9 f) p4 @$ s6 A0 I1 k5 V+ V
        <script>) ]  ^  x! R1 f, ~6 B' q' X
        new Vue({
2 a3 _5 L. M) y% l* \! L            el: "#root",  F) J; C: f/ C
            data:{. V) D$ F1 J! P: @
                show: true,
& I3 S9 B7 F0 K+ ]$ H                list:['plm','home','I','love','you']9 F$ ]9 [7 D2 A9 F: R# W# q
            },4 D- [6 ]% i! q6 z! N0 g  v
            methods:{" n) G4 `8 q% v7 L
               toggle:function(){* H% R( D# K0 X$ L
                   this.show = !this.show;
1 e* _3 f; j; c$ J( s' q               }0 B3 W  W. p6 q2 ~9 ]
            }7 |& ]6 z$ ^+ i( C% [1 j
        })
6 ]) [, M) y9 c! v6 ~: }( E        </script>0 K  L1 x# h2 L+ d! s( }
    </body>! R5 g- R- u* m" w0 H: c
</html>
/ q9 b: Q. }* U, b7 a. q
; n7 F5 C  c, B: w3 O0 e

# p" a; N# K. ~- `
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了