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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x

3 V( k0 q9 E( u" S  r% r% M" v
% ^0 L7 \0 Y# H3 F( ^4 l
/ X( _& d6 I, R+ S( k- x<!DOCTYPE html>
( S( n( w0 \  T' c. K  |<html lang="en">8 O: ~0 C# Z8 ?5 \
    <head>0 [, V8 t- K0 s5 q6 n
        <meta charset="UTF-8">% S8 Z  {- Y$ W( ]. M' H7 C2 J
        <title>Vue JS V-show, v-for,v-if</title>
$ y2 p1 j' \- \, J        <script src='./vue.js'></script>
  U% E* E; A, X) Y# e    </head>
: U& T1 P$ {7 e9 W    <body>
* a/ G( L; Y: X& u7 i        <div id="root">
- b* j8 q3 g* w) T            <!-- v-if delete the dom2 ?$ k) B* @- Y; l+ \
            v-show just set the display:none -->% {  E" ~% N3 I2 }
           <div v-if="show">hello plmhome</div>
4 S" c: q4 ]' X) s7 W9 p9 K           <button @click="toggle">toggle to display</button>
6 u, ^$ O  W9 N; l% L1 \
- S2 g! k5 A. ]0 W' \- D           <ul>
5 A, I: Z( K2 b# `& D                <li v-for="(item,index) in list" :key="index">{{item}}</li>* e7 K( L& }9 }# M& G
            </ul>! A4 k# N# q7 A) B- L

& s& \  P# V0 V: J7 o% j        </div>
* O1 {  h. R' q* B% n5 ^0 H% H9 S/ I
' U; w+ X2 x0 R: `
        <script>
7 W+ P6 K1 U3 s7 |; _        new Vue({
$ d/ u+ Y5 F0 L4 r            el: "#root",
# x9 f( d# e+ L4 h& G; w2 Z            data:{
5 C; Y. B0 h* v6 t                show: true,
) y) z$ s7 e8 I) B9 H6 m) D; M6 G                list:['plm','home','I','love','you']4 u5 M+ _* m( t
            },8 w! C* s. T( Z; \" M, g
            methods:{9 \! M* W: M5 g5 D
               toggle:function(){0 I/ t5 C% C( G" k; z  f" k# |
                   this.show = !this.show;  ]& H( ^' S' `0 R9 \
               }
+ H7 A% H$ S2 m* f            }
  a0 A! i: M% k/ o        })
! x9 U% }4 C, E7 J8 j& ~        </script>) w: O/ _. x' i6 i0 S7 n1 u. z
    </body>" w+ U: Y. K5 K
</html>
5 }0 _$ U& Q: a5 V8 q2 P7 \* G
4 }9 @3 }/ V, }
5 r7 d( ^, d9 K( a) w7 r
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了