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

[前端框架] Vuejs 计算属性和监听器

[复制链接]

2019-8-7 09:29:47 2116 0

admin 发表于 2019-8-7 09:29:47 |阅读模式

admin 楼主

2019-8-7 09:29:47

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

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

x

) ~" o1 V% W" L, f1 z; s% {3 }6 K! X5 i: l4 N
<!DOCTYPE html>3 e' R; J$ y. h1 }
<html lang="en">$ `* E$ K5 w8 i. E

! a$ S5 G" n* b$ b7 a<head>' ]1 c, F, H: ]% t4 F
    <meta charset="UTF-8">
0 B* t, h$ \% a4 y, ?    <title>Event Bind</title>) ?9 S' `4 v& K* {
    <script src="./vue.js"></script>
' J& a3 _4 v% W5 O, V) k</head>% Y* M9 ~8 {& i& Q3 I) y
4 ?& g8 ]- Y# f% a6 I% _& O% Z
<body>
/ z2 n3 \3 y7 P6 m- A+ F, x    <div id="root">
0 d( ?/ l5 \5 n* Z7 u* U, `0 V        First Name: <input type="text" v-model="firstName" />4 h  y1 b8 g$ E) x; C, V2 j1 t! z
        Last Name: <input type="text" v-model="lastName" />; M7 o/ h  ~4 d- n0 [' J( ?, [% l% k
        <div>7 P$ c0 X1 s4 p, R
            Full Name : {{fullname}}
0 M+ a5 J& W9 V9 A; u* x: Z        </div>. {& O5 w# K" M' G- ^( M+ O- N
        <div>+ O% T2 l/ x8 A. ?& E3 S
            <h2>{{changeTime}}</h2>
; H5 x7 [. j: E' X" ~        </div>( h3 W! s$ K4 R0 p9 F) [5 Q+ K
    </div>
. B) \/ A8 s5 R# G# _4 |- T    <script>
" r1 e7 z$ ~1 M. O9 }' d; e! J        new Vue(
8 ]. J( E0 T( q" l4 k- T$ z! p6 w            {0 X6 N8 a5 E2 r+ {
                el: root,
! L, ?& c$ z6 t& E                data: {
: v( y% o4 ~* U5 {* n' S                    firstName: '',
; s0 |0 \2 e& Q2 U& y5 g                    lastName: ''," V) ?" ~( ]- w' M3 B
                    changeTime: 0
: T# ~, \: |- ~* v- h; h9 @' b2 J                },
3 Y, V# C+ s" _# v2 ~) d                methods: {3 o+ @; w+ n! Y  m7 }" P, r( X
4 y* ^0 n5 g; l7 |+ Y  Z$ ~
                },
0 P. h& p# |/ G8 @% I* a2 Q: G                computed: {) o1 Y7 t" x: @# r- ~, F9 ]; |
                    fullname: function () {  b1 T9 s# t  z2 ^4 k
                        return this.firstName + ' ' + this.lastName;
4 q4 F  K- o$ s" o                    }
& Q% R: [" f7 H# s9 q% s                },
5 y0 |( n0 b( v5 L7 P) n  V9 ?7 f( ?                waTCh: {
2 _" _6 }% }/ [( b1 A                    fullname: function () {; i) j6 U$ t9 J6 h2 W7 A" d4 z
                        this.changeTime++;, |3 i6 E8 O! B
                    }
$ g1 |( M1 G" M0 s# z. h7 H                }5 }& V4 U# H0 s" f" g2 q/ F
            }
0 ~$ |+ p2 c# M0 B        )
/ B( B4 U- V$ C5 |; c+ i* q    </script>7 H7 D7 U& m5 U% M6 c3 M7 G1 I
</body>
  w1 O  K3 n9 t; V6 g% H# \* e$ z* G
</html>
; J- j; W. `9 S+ a( g: a4 X
4 M: i8 W/ `; ?9 L% T: H9 Y

1 H. p' L6 j* N" k! U) G8 h
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了