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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

$ n0 @4 [* g: R% G" q( P4 ~0 i7 w; g# u" l+ `5 I
<!DOCTYPE html>3 b1 T8 C! J7 t  I9 x
<html lang="en">- ]) A, h9 m! U& F1 }

% O. I" s1 W- d# f<head>% t& W" i  Y# `4 Z( V$ g  B5 I
    <meta charset="UTF-8">' p" k' _' u5 A4 r
    <title>Event Bind</title>: ~3 y& m8 O2 i6 V5 y2 \4 f
    <script src="./vue.js"></script>+ d" i  X7 Y$ d
</head>/ v1 E1 k" O7 b, f3 `0 {
, |; J2 t! Y! R5 b& [- m0 K: G: R
<body>
3 W; P0 Y. F7 b, e/ F    <div id="root">
, G' ]; Q' ?2 j% u3 M! A. ~5 O# I        First Name: <input type="text" v-model="firstName" />
1 x, l4 d% T# q" ~& D- R, l6 }        Last Name: <input type="text" v-model="lastName" />
% Z) p' T& n% u        <div>) d6 U' P( M' d& N+ b- y1 @" k5 m
            Full Name : {{fullname}}
3 a2 p# I/ o. _7 o/ \& z/ u        </div>. j. W0 r+ ~+ P- N( U3 _* s/ s% n
        <div>
5 n2 t" S  V3 p8 O& m            <h2>{{changeTime}}</h2>
( B# M/ a& \: z        </div>
3 q' R; Y2 I$ n  Z$ {- y9 D    </div>3 S6 b% [8 {) I! K: J
    <script>, C( C& Z9 `2 W4 }: _* H; E  n- M* Z
        new Vue(
( V5 i1 _; ]+ R5 _$ i5 |            {
# p' u8 ^3 M# P                el: root,0 s5 s" _3 W" n% I5 P: a5 z: ?7 C
                data: {
& i9 G- N# |# B5 E1 m                    firstName: '',
4 Q" S) [; \8 V& u8 B- T. ^" D                    lastName: '',
" s' G. _; U5 v$ n7 s                    changeTime: 0
/ R+ y$ [. N* l) a- c$ h                },* `. d8 c% c+ @8 u( t- d' J7 P
                methods: {2 z( I8 V: U8 Z) z- w$ {% c# o

" f4 E+ }4 z  r4 l( r3 K# n                },
- G. M4 n9 _7 o- K, ~% C4 ?                computed: {
* ?6 Y1 Q3 S% B# W* ^# Q' e" ^                    fullname: function () {* G7 h# H: }* o) a5 O
                        return this.firstName + ' ' + this.lastName;
% y8 i( l& I+ p' E6 r  h5 m0 c                    }
( P* O; @& R9 ~                },9 C( ?+ }6 a7 O( R/ T6 i; P4 d
                waTCh: {
4 R0 P. b9 W4 O. U1 Q                    fullname: function () {' o: H# n( b8 J& S+ c" ]2 k0 z
                        this.changeTime++;
# O1 W7 N7 {# C$ L7 `& N                    }
5 J" M  k! H  [& t                }
1 b! L' w- D3 H6 B( k" C4 q- V            }
1 P! W; ?! H- c3 Q$ |0 F        )
1 S+ M! E, g3 M) E4 O/ m! p    </script>
! M9 ?0 i5 }0 w4 q, \: [</body>
) ?  L; t  w# t* U6 {) K
7 S( k9 k0 Y8 k5 x6 M; \</html>0 V& j/ H7 ?1 A5 @: D8 B2 m+ `
, n  n6 I- \6 j5 O3 P' T- }

0 p) K8 n: J8 u" q9 i3 G
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了