PLM之家精品课程培训,联系电话:18301858168 QQ: 939801026

  • NX二次开培训

    NX二次开培训

    适合初级入门或想深入了解二次开发的工程师,本培训结合ufun,NXOpen C++,大量的实例及官方内部的开发技术对于老鸟也值得借鉴!.

    NX CAM二次开发培训报名 NX二次开发基础培训报名
  • PLM之家Catia CAA二次开发培训

    Catia二次开发培训

    Catia二次开发的市场大,这方面开发人才少,难度大。所以只要你掌握了开发,那么潜力巨大,随着时间的积累,你必将有所用武之地!

  • PLM之Teamcenter最佳学习方案

    Teamcenter培训

    用户应用基础培训,管理员基础培训,管理员高级培训,二次开发培训应有尽有,只要你感兴趣肯学习,专业多年经验大师级打造!

  • PLM之Tecnomatix制造领域培训

    Tecnomatix培训

    想了解制造领域数字化吗?想了解工厂,生产线设计吗?数字化双胞胎,工业4.0吗?我们的课程虚位以待!

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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x
6 t; i/ {, _/ z6 {1 d. I3 F* d* ?
' r) A4 h9 M2 a! H5 j$ Z  }3 \

6 F9 I, W. l" a( `$ ]8 o<!DOCTYPE html>+ ]6 @5 _; Y# A4 s6 F
<html lang="en">: m% V) H$ v; _7 u8 ~( j
    <head># z1 V* d$ J- E$ t
        <meta charset="UTF-8">
! M" ~( S# [$ w' g) a0 N# M2 i        <title>Vue JS V-show, v-for,v-if</title>
1 ~8 {/ p# Y/ u  C1 l, X        <script src='./vue.js'></script>0 t9 h" V6 u9 N0 h2 n* k% ?; B
    </head>* Q: z( Q, O0 }: e! D- K
    <body>  j' q3 ?% D! v( ]5 h
        <div id="root">5 e3 `+ u- z/ w+ v
            <!-- v-if delete the dom
8 G8 Z$ P$ r0 k$ H2 h" {            v-show just set the display:none -->
0 H) \$ s3 [* Q. `- Z) p* m           <div v-if="show">hello plmhome</div>! C6 y; g5 u4 F  C9 s" @
           <button @click="toggle">toggle to display</button>
- `& x; @- m4 k4 c+ ~$ c' h- N2 p/ e7 J- k: g$ o) S4 Q
           <ul>
2 L5 K2 q* {7 v5 e4 G& ^6 Z2 |                <li v-for="(item,index) in list" :key="index">{{item}}</li>  L5 v' _: P) _5 n& C6 m# S
            </ul>
. d7 w! t7 |# y8 m( ^0 ?
! j7 r. t4 I4 ^' {        </div>
3 L! O2 c& m  r# @& h& K! K$ z
  B9 n6 C- K5 @. G( w3 J/ K# }: W8 L" i$ ]" s& ?# J# d
        <script>
5 o: J9 G6 z, k+ `. W        new Vue({
' G, ?  A! v* O/ |; z! A            el: "#root",
+ Y& c% |# x8 d5 O. {9 o            data:{' w/ t6 A' H5 e2 X' ?3 ~$ A0 n9 E, T
                show: true,
. q# j- e/ k( d, H                list:['plm','home','I','love','you']  G4 F" }; r: l# z$ O& w
            },
) C5 m; |' W8 W: Y: e+ j' v2 m; a            methods:{
  P& J% I8 }4 _& @9 a               toggle:function(){
, s9 |; o4 H) {2 B8 r                   this.show = !this.show;) x1 P9 x  C, j1 n; w3 ]3 z
               }5 z" U5 z$ u6 `  V
            }# @" i/ z1 G. _# r. ]4 p
        })
2 A" x% T+ H$ P6 E( z/ @0 p        </script>
; A. I- w0 R5 F5 D: `$ H    </body>
  ]3 M! T2 Z' z8 M" t</html>
0 t0 g+ F3 W/ L9 p% E# U9 Z" h4 o; R7 Y
  ^5 }# y, t; M" w& m+ J
1 y2 M, a# ^- {, r0 p! J
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了