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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x

: x$ D; O, y* A2 B
1 V9 t9 `" u  L$ }) N. [- H; d" K" l; e  H: f$ d% g$ K
<!DOCTYPE html>
! w' U/ y' D/ Y1 ~' @- m<html lang="en">
7 p( R1 L- T+ U' B! G" _    <head>) @7 X5 u, @5 C. a6 n3 G8 a. x/ C) r: |
        <meta charset="UTF-8">
* X. ~( L3 h& Z! I* u        <title>Vue JS V-show, v-for,v-if</title>; i4 Q6 Y7 S, k% Q8 R
        <script src='./vue.js'></script>8 \! P6 E7 d& J& C9 a0 J1 l/ Y/ ~
    </head>
" @  q8 A9 N6 h' [, A/ _( Z    <body>
6 @9 L+ W* k8 U( q4 @        <div id="root">
3 A2 O" o! F& t1 v. ?  u            <!-- v-if delete the dom, ^+ B1 G7 ?  c0 S
            v-show just set the display:none -->
$ h! W1 q8 B1 Q- L: M8 x* d           <div v-if="show">hello plmhome</div>& S( E: T+ S3 E# v- E& _
           <button @click="toggle">toggle to display</button>
  s  `" W8 d( k8 T
- r7 D! c$ A+ Q6 S8 a/ u3 o           <ul>
8 ^6 L8 h, V! J1 u                <li v-for="(item,index) in list" :key="index">{{item}}</li>
) b; S3 N$ @  J* c) Y            </ul>% m' s, i+ v& _5 l0 v
) a7 `" X, {) [
        </div>2 H3 X7 y# f' U; x: |
7 P- O6 v8 F0 m8 ^
5 Z! j% o2 r8 t( z
        <script>
: F# C0 c0 y$ j6 a9 _/ c2 C1 W' J        new Vue({+ W! _+ p% U: u
            el: "#root",7 p6 V, G: H7 ?
            data:{
. Z2 C, {5 e* _                show: true,
0 H- P+ T: s$ O0 X# A                list:['plm','home','I','love','you']( ~% K9 X3 y' x* u+ N
            },- Q7 [0 ^4 V  M
            methods:{
' D, U- e* f2 K- Z: C8 t3 A% |% e               toggle:function(){
0 t$ `! z8 ^2 e% b; [: w3 @/ H                   this.show = !this.show;
! ~( z+ J9 T9 x2 N5 h, d               }
! ^* t7 q, [+ I! _; Y% H" o# O            }
1 w* _! f1 \' K6 v0 _- v- h% J        })
- a9 K  L% a7 t; B5 e' R        </script>
9 N/ ~, H6 i# o2 I5 @    </body>; U: S- W& n- F/ Z
</html>) e3 w9 s; e8 {3 [7 x3 g
9 J( r* v; ~1 q/ G
2 l8 q. L' w+ z5 k5 D% p
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了