PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

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

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

x

4 |1 ?# ?7 P8 H  V% Y1 L& i( j$ J/ K. X1 J3 J5 e6 p% X, n
<!DOCTYPE html>. o% C; a* [% ^
<html lang="en">' e- }. h4 ^5 N6 e& Z
' D% o; g: |: U/ P; @
<head>
0 G9 K4 l; ?4 e; S2 _    <meta charset="UTF-8">
" I4 T1 G& ~/ {' J/ P3 b# `    <title>Event Bind</title>
) Z! c1 P8 ]  x7 j    <script src="./vue.js"></script>1 N  a0 K! G. `5 A! @; |5 w8 F+ p6 x8 E
</head>
& E/ x. J/ u! J* ?- d+ \, W" q" x6 f% t% w+ {
<body>
) c& l7 K" R, i! [    <div id="root">
% D2 V# h" [3 Y( R0 T        First Name: <input type="text" v-model="firstName" />0 m. {" I  h$ ~0 X& N9 v4 C) `& e
        Last Name: <input type="text" v-model="lastName" />, ]7 B2 V4 U) T2 v
        <div>1 H% [( i: l8 o: U7 W
            Full Name : {{fullname}}3 Z; q5 w8 z' @; x+ {4 u) l
        </div>/ G6 s' I; a0 i0 o
        <div>
5 E( i: {  F% ^, l9 G$ x) X$ M            <h2>{{changeTime}}</h2>3 O1 G" ~. ?0 v
        </div>7 x) I0 S5 O# E4 i, n5 r
    </div>: U9 c. {1 U* d1 ]. g
    <script>- D5 c2 p4 b- ]6 f- t6 F
        new Vue(
; i* U# N8 u! W# ?" X0 Q) |$ L            {0 Z0 C5 C+ d" d4 U$ V* c) b2 F
                el: root,/ b; i+ T& q8 C2 ]: i% R# l, i8 h+ `
                data: {
" f& ]) s. H% x                    firstName: '',
" H2 `2 X. D! i9 B                    lastName: '',
! m: m! t7 |9 J) o9 f                    changeTime: 0
5 l' e! Z5 C9 Q8 k0 \! Z                },
: X$ t: z7 |+ q                methods: {  \  t* W2 k8 z

/ G0 `  c$ m# b, t# H+ X, R; O4 R                },
1 a2 q$ D9 ]2 M% h                computed: {
6 {# o+ [7 N3 k+ A2 X. J                    fullname: function () {$ M. _' Y$ k( U1 c' `4 X
                        return this.firstName + ' ' + this.lastName;6 g* O4 h- a: p
                    }% m) `8 Q% L. M% W, c( b( N# ]6 y
                },
4 l5 {* H3 P( F2 o6 y2 j                waTCh: {& I) F8 S7 i/ r. D8 Q
                    fullname: function () {4 Y6 n$ T# F# n5 A% S; [3 S7 l6 D2 I
                        this.changeTime++;+ s$ j8 q# @" G* u% A  N
                    }
' j" X+ g0 V. W                }1 X/ o8 d" \( v
            }9 s/ Z; b2 \* Z; |( N
        )
& E' i; ]( Y; V# }6 m# Y8 T& T( n1 {    </script>& t- C7 e& Z+ [+ q: s; l8 T  Z
</body>5 b# k5 E8 K5 x+ I3 |( |4 A/ }
( I9 p" q. b: F" T* {- D
</html>
" ]. b3 }* O! y5 s
7 \# G" p& f8 I# M, u( b
( D& }, @8 E& y0 F/ X" R  W$ 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二次开发专题模块培训报名开始啦

    我知道了