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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x
- X9 V/ O# I1 T3 q6 a- U
) J) N. T, c$ ?

% i: s6 ~5 B9 I  E. h<!DOCTYPE html>0 J# |- O' F; J8 d3 ^
<html lang="en">
( U0 A3 [; G& Z: \: u    <head>" o# |& l* t0 d
        <meta charset="UTF-8">8 H) A* |9 J: p4 Y" n
        <title>Vue JS V-show, v-for,v-if</title>4 s1 G4 f0 c# J' N5 p- a- x- |, g  a
        <script src='./vue.js'></script>
' k$ |* \& V2 S4 D) _    </head>) M$ m% G0 e! o. y
    <body>& ?" J6 ]& g) z9 g6 Q
        <div id="root">) M! l& G! `/ v6 ^' ?
            <!-- v-if delete the dom
6 l+ o: K5 {4 _% X! j' _            v-show just set the display:none -->
1 Y' T, E8 ?* _) g2 F% `           <div v-if="show">hello plmhome</div>- }8 N, _8 W) T) @; d' m$ S
           <button @click="toggle">toggle to display</button>2 Q% H2 q3 F( T/ @3 B

8 G& p' t! s% b+ G; n           <ul>3 S) H% r7 l6 K# {4 _/ N3 l
                <li v-for="(item,index) in list" :key="index">{{item}}</li>$ I9 x( G" U( f- `. H' A
            </ul>7 [& u# _4 }% b7 h6 {3 |! i7 ^

6 w% }+ \1 K* n2 D8 T) C        </div>
' k" J: e5 B5 B2 y
3 d# x0 a/ j) J" O% S
. T9 y* w6 O% @. g! d        <script>$ O+ R* G' {1 }7 ~
        new Vue({( t  |6 A# ~) r+ U% Z  Q4 Z
            el: "#root",
0 A" b. u' V$ l- }6 M& W1 H            data:{. z/ g( q) _! }' Z% J
                show: true,9 g5 L! [! ^; k% t
                list:['plm','home','I','love','you']2 `0 d! m# _4 U- E" `/ W  n
            },: Z! y% W; l, m' l% [1 D
            methods:{
; @8 S  x, U; ^9 h  y- Y& Z               toggle:function(){! J! O* U$ \+ g7 B! v( |
                   this.show = !this.show;! i& M( b: Z" G5 d0 ~0 Z; S
               }
* i0 A& i+ q. D4 Y8 j; \0 H            }
: X& L0 B) X% u        })
0 A4 N' [" O8 A& @        </script>
+ L8 J8 a: P- t4 Y1 R    </body>/ _8 i7 {' e$ x
</html>; ^, L, a1 D5 `$ N. H
6 H* }0 R$ z# e  P2 @

! P8 c& u, \5 |; x& I0 t" D" A5 \
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了