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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x

) ]  E% l9 A# [# H8 S# W& @" N. A& |! i$ s2 L# J; s

/ ?+ [$ N6 b: g# t! E7 h+ M<!DOCTYPE html>' J2 F5 \9 o& Y
<html lang="en">
( h3 h8 F' ]( g) A# Y    <head>9 d; p. U# L- i  d& m( ?
        <meta charset="UTF-8">
, \/ H! P& Y; t  v( i        <title>Vue JS V-show, v-for,v-if</title>
! F5 J1 w; ?9 w9 o3 o. Y" w        <script src='./vue.js'></script>
9 c) ^5 ^  d, O    </head>
) h: h: R- ?1 Z% q4 l- `% \    <body>
- e2 T' |' l0 u2 k        <div id="root">
8 [) x8 ?$ u5 n) A2 h4 Y' r' `            <!-- v-if delete the dom
! |. r, B. V8 G; R+ M            v-show just set the display:none -->
  q+ f+ r+ o# |. X! j. U3 U( I           <div v-if="show">hello plmhome</div>: H& v7 v0 N/ N1 O- f: D/ w
           <button @click="toggle">toggle to display</button>
% @$ S6 G! c$ b4 C8 r8 w4 O1 M0 _6 T' p- ~
           <ul>- Y4 B' b& z# j. j3 m, h  d
                <li v-for="(item,index) in list" :key="index">{{item}}</li>
* `( M+ S+ X% w; K% G9 s4 C            </ul>  G+ e& k- X' C% \
" l, F' y' O% W
        </div>
( @3 W" q0 O0 c5 w
, ~4 }. k" Z( x9 D. Q6 W+ O  A5 G/ ~" C6 t
        <script>
* r: A$ ?9 e5 l- c8 j        new Vue({
/ m( C) D5 X- [            el: "#root",+ f  C4 M( G* o8 @7 u" e* e0 ?
            data:{
& h# P; d, K3 E9 i                show: true,. a, E" k# G  Y( e" |, g
                list:['plm','home','I','love','you']
+ ], E; n% v: I; d            },
2 B, E# L  s! Z0 [% a2 i6 J            methods:{
5 i1 c7 j! L6 J5 z' T4 I               toggle:function(){
5 w7 Z6 X$ d' V                   this.show = !this.show;( ?. ]6 Q7 c+ e+ a. d9 h
               }
( L9 }5 U7 m- e5 ~            }
/ x6 V: s; S4 T        })/ S3 v  B4 J9 u" j
        </script>( B3 P* Q! @+ P; z
    </body>
5 D$ m' s) j" s, v% I2 Q  k9 D/ @</html>0 P% b. G) G& q6 b5 D. M
# T3 Z4 `7 @& L9 q2 Z) i
0 C' [' j, j2 o5 e* {
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了