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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:56:07

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

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

x

' i1 \% U% Z7 q: j$ k! h# [. q$ e  t7 u3 x9 z3 q& R

& l- U. G( I" R" E4 L( q<!DOCTYPE html>
, n1 z2 X- x5 @<html lang="en">4 _9 e/ T, G& T0 V
    <head>
- i0 H2 X2 Y& [* }& j/ E3 h        <meta charset="UTF-8">
: a' |: v& ~# s        <title>Vue JS V-show, v-for,v-if</title>8 T, Y4 }) n4 q, Y& o9 z: l1 P) g& {
        <script src='./vue.js'></script>
9 ^! o  U  d' m* l/ B6 z    </head>
" V) T' y: L* S# K    <body>$ N8 {8 F! u, h$ w. H
        <div id="root">% h2 \2 D) @$ z. {( K; U% x  q/ C3 H
            <!-- v-if delete the dom4 a$ d6 V/ E% ~' A; c
            v-show just set the display:none -->
' S7 D2 w; g* {2 y8 u2 Z, V6 e% I           <div v-if="show">hello plmhome</div>2 [" t( s3 T2 A
           <button @click="toggle">toggle to display</button>( M- k3 D# r1 B9 [9 {  d

$ g$ K/ x3 S) j" i) a' `           <ul>' @1 i" L) L$ x2 M
                <li v-for="(item,index) in list" :key="index">{{item}}</li>: O- |3 _- @- {# }
            </ul>3 K! B3 z1 T; y- p: T0 F% ~8 V

4 Z' s- i8 z1 _! m' ?        </div>
, c( y) F# Z. x5 i5 \" n1 R2 C" e, t5 U
  H& ]5 n' h- z3 H  a/ A& x
        <script>; q- S, b/ U& l( |: Y
        new Vue({
2 O' y: [7 i, a  j2 v            el: "#root",
5 D, i* n0 W/ J  d" g            data:{
3 v9 L+ F0 I6 d2 \; S$ {0 \                show: true,
8 U# R* I2 n0 U; W: X                list:['plm','home','I','love','you']
; E4 |2 |+ p: U8 ?$ r            },. h5 N- p6 t" I& N* O, M& y
            methods:{# w+ b: l/ o. [$ ?
               toggle:function(){
2 P: @  {' b, S* G( X0 x                   this.show = !this.show;$ Y$ V3 Y8 J6 r& Z9 H! a  q& K
               }
7 s4 _4 M: q1 p0 i# J            }
' f" k- T  l% F: V' o4 D- p        })) ]. B7 m- Z0 Z; D7 u+ Q
        </script>2 |4 e& @& k& t- J9 [
    </body>
/ W9 m$ o/ U/ z" p6 g: e</html>9 ^, u( `% j! k4 _* d  H" P
4 C$ K, o- ^( i( [2 R

4 V, ?8 q+ I" s$ W' q
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了