PLM之家PLMHome-工业软件与AI结合践行者

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x

4 W: \! h. Z9 P, Q" ^& i0 @4 z& S( U) t  U/ ]: M
! B( C, s- c  c. D5 n$ ^7 t& @: O
<!DOCTYPE html>
' ?" {3 v$ J/ o<html lang="en">$ y0 e+ A: c' L1 v1 u% D( l9 o8 e
    <head>
6 ^) F% ]3 o, }7 g! ]. y        <meta charset="UTF-8">  e. w5 n5 H: P  O0 F
        <title>Vue JS V-show, v-for,v-if</title>
1 ?( ^4 o) h. k! ]  R' U        <script src='./vue.js'></script>
& r2 m' b) I, Q    </head>
2 E* W/ G  u% \& u    <body>1 I" J# O, a' y
        <div id="root">
, e$ H# ~3 O6 X9 j$ C            <!-- v-if delete the dom" @9 E2 m! V6 b7 Y8 L# w* `
            v-show just set the display:none -->
$ ~3 G0 I$ H$ m4 g           <div v-if="show">hello plmhome</div>
7 L3 _2 P% s+ V           <button @click="toggle">toggle to display</button>2 U% R) N, R7 e  P
& \. z" H& {1 [8 s; P
           <ul>
( Y" }6 }1 G8 b* T7 p0 j* z. U5 N2 O                <li v-for="(item,index) in list" :key="index">{{item}}</li>
" C. m3 z+ B- k4 G- d5 M- D            </ul>
' i& C6 p& O1 I, a1 d$ |5 m8 \
% h/ h# w  C, W1 l' k0 G        </div>
" Z1 a( |, K$ }
6 G2 ]6 F1 k/ Q$ X$ u- p6 Z1 p7 X. h$ J6 }
        <script>
) ~) B3 `  N8 O2 y- X  a        new Vue({  ^  j3 {+ a# o% R1 o
            el: "#root",
: T7 ^$ {! a9 ]: F            data:{
  k% x1 w& U( `' f2 d- n                show: true,
/ b2 `& F9 p! o: w6 Y) y                list:['plm','home','I','love','you']
4 ?; M5 W& L' U* h* R6 R            },
" X9 _. b  Q3 b* P$ L/ L            methods:{
5 `. |* J- r- t7 C% |6 X               toggle:function(){
3 K8 o/ J/ Y+ _% Z( j* a- G                   this.show = !this.show;" t. O* U+ V$ z* w  o. G3 g
               }: b. l; w+ b6 x9 C
            }" }7 E$ d2 S- R1 X( A
        })
) V+ H* p- F4 d. I7 e2 d5 J4 ^) D        </script>9 S, C/ \8 l+ x$ ?% F8 g: ^
    </body>
% G. o, ^& z+ L/ Y  C3 I' r) I/ D</html>% J  y* J1 l" D, D

' e- r! i% O4 A2 |; {8 A4 H4 a9 k3 Y% }5 _3 Y' r
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了