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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x
; a4 `& T' e7 C; V

! n+ a5 C) T5 r+ |0 J8 G2 X
9 T3 s, I2 A/ v5 X8 t6 r<!DOCTYPE html>0 m4 a  D! B/ X+ G# G- e
<html lang="en">
) e- H5 M" I6 h8 @    <head>
. N1 E; W# B" Y        <meta charset="UTF-8">: j2 ~* M' [' h; ?3 F0 n' {
        <title>Vue JS V-show, v-for,v-if</title>* q+ n9 z+ u; x0 W' F
        <script src='./vue.js'></script>
. K4 t/ C; \/ e9 \) g( ]    </head>, \2 a; G- ^. j. V' r! c6 d
    <body>5 r  _6 e& ^. x- S. p% {
        <div id="root">
- {% b% H2 O0 d5 v7 q# @! x0 Q            <!-- v-if delete the dom: \3 i& U" {' s* j/ {7 p
            v-show just set the display:none -->
: x' x1 Q6 m" M) ^* e( f& V           <div v-if="show">hello plmhome</div>9 o+ j3 i- i  R) q
           <button @click="toggle">toggle to display</button>
# q( F- E' e4 n% W6 _" j  X# Y" ]. o. Q# A! l0 b% ^; Z
           <ul>
' H" f( g$ K4 y/ q2 s$ F; {                <li v-for="(item,index) in list" :key="index">{{item}}</li>2 u# i: g2 |( }' u
            </ul>
: O: ?; T. ~! s0 U6 j3 C9 L5 r) t
; r8 T2 S1 {- W        </div>
  \. L" H% z1 s+ |; r$ J0 X( l0 H7 W9 p

( N5 U) H0 j) [- Z% s        <script>6 a5 u4 \  N3 N
        new Vue({
/ K. x+ D) w7 w- H, n" w5 X% J            el: "#root",
4 P& k1 v3 K2 e4 q+ w1 H, e& d            data:{5 r8 U; a) b. n2 d! U) ~
                show: true,' E! s: s/ f. x5 R% \
                list:['plm','home','I','love','you']4 B' i0 f1 ?  B# ?/ }3 l
            },
  T) [/ c; ^4 O8 U            methods:{
$ [, \0 W3 K8 v               toggle:function(){
7 {" o' `8 @: t+ h8 h                   this.show = !this.show;+ Z9 M- L5 m% R' Z! G
               }1 m- y2 }0 K" |8 Q/ ]
            }0 x2 V" G* Z4 T( s# R# {
        })
4 z: w& f' i7 T5 g7 @        </script>
- Z. g4 c6 C/ n) e- @2 t    </body>* ?6 I) k0 R( }8 S7 T5 K$ ~
</html>
/ Y5 A- ~$ C! j  ]6 x
( C& l& p" j! ?! B6 y

, D6 O* m* l& c( B
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了