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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x

2 Y4 V6 F5 F, l/ P. o& M1 r4 g
6 {( G" M6 m& E1 U& E  C- c3 x6 ]2 T8 N' V; l/ F' w5 B5 W1 j
<!DOCTYPE html># g% v# y- B4 X7 j& o3 ~8 ?
<html lang="en">
# B: L# b! R& m- G1 l1 ]$ f/ n    <head>
- c7 l! j0 M+ T6 c, q( h        <meta charset="UTF-8">3 D( l3 r: s) r6 W
        <title>Vue JS V-show, v-for,v-if</title>
( r* _6 q. m9 w        <script src='./vue.js'></script>2 P) P: j! N! B" L/ t8 b; e6 o; x
    </head>
% e* v4 U. d: b4 N    <body>2 u5 W4 l. e* @5 m3 x$ ]6 |+ v! a
        <div id="root">1 N/ M' \$ |$ i
            <!-- v-if delete the dom, e* ?+ q" V* U3 }
            v-show just set the display:none -->
0 {) m7 O( T/ ]! F$ }2 }* Y           <div v-if="show">hello plmhome</div>6 c' z5 U) [4 L. L: f) k% ?
           <button @click="toggle">toggle to display</button>3 F$ \8 y& v# t2 Z) I' C
( T, n7 f, b0 S
           <ul>2 w3 W7 M+ a0 V: z- @: M
                <li v-for="(item,index) in list" :key="index">{{item}}</li>( \5 [9 t2 v4 g; I
            </ul>
+ ?" i# j3 S1 F: M/ h
9 D+ V, w* R1 g1 z        </div>
8 l- M- w! v, x
' K; g7 F$ d' p1 j* V
5 J4 [0 @* d% M- c( S6 s$ W5 x        <script>
6 w9 A& Z* P" D        new Vue({+ R, s6 R2 ~2 W
            el: "#root",
3 p7 j1 n' w7 [: U4 o            data:{
$ t: l7 r; S9 v                show: true,! Y5 [+ [  o: u! r
                list:['plm','home','I','love','you']
, _1 _* W/ ^+ T6 _/ V9 a) @            },
! N* U0 o" J$ }: P5 y! n& R            methods:{
5 Q6 ^1 N" K! U6 C) V4 y               toggle:function(){
& Q# [% U* K1 ?/ F                   this.show = !this.show;2 X' L8 T# V! R5 v
               }; C. ~$ k* Z: O) `) f5 b  D/ r* S
            }
& _2 O2 A% }1 K/ D        })
3 x% t  m, E5 e, x* i0 N: Y        </script># a2 \; [3 f: f5 C8 `
    </body>
4 n9 S2 N& R/ c6 h# q3 ]</html>
0 p  L1 o/ w  L/ z+ s% @. t5 z' u

! t& l% c5 X" R6 v% O; ^" L0 G+ g7 ~9 w0 [$ j" R. J/ |
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了