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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

/ D3 j* Y9 K+ q" F  U# h7 G$ D7 q  m( Z7 ^8 |
<!DOCTYPE html>
' ?7 p1 s1 R( O<html lang="en">5 D$ B( N, A) q  |; w4 B  L2 w

( J. _' C$ P$ A  C. }2 R<head>, D' @7 y9 Q$ ~. \8 \- A
    <meta charset="UTF-8">
; Z) H3 n/ b0 V- v2 x    <title>Event Bind</title>2 L2 k' g- z8 d6 X) P, [. j+ z9 }
    <script src="./vue.js"></script>+ K4 h2 K* k- t. E
</head>; i( P. i9 N5 \
8 `2 f9 P5 n" C' Z! N
<body>
+ B: z+ z3 R2 p+ \, a  K    <div id="root">
1 k/ L8 Z& C7 ^4 Q- u+ L5 K7 }9 T        First Name: <input type="text" v-model="firstName" />& D/ g+ W: K2 t* R& H. ^( W
        Last Name: <input type="text" v-model="lastName" />/ d2 ?* t! m$ O3 g' f5 ~
        <div>9 z: j  O' B: n1 k, i8 ]
            Full Name : {{fullname}}' j, s! P( ~7 X3 g3 A2 s- p
        </div>
* |. p1 Q2 c+ r. u! S        <div>
& [3 y+ F/ C. x" c" j3 ^1 M3 [. C            <h2>{{changeTime}}</h2>
1 B7 J- ^  [  B6 r7 |" S        </div>
# e& t/ y1 }  X5 Z    </div>
/ J5 [7 a5 S( i7 q, y+ m  c. C    <script>" p: f5 ?, M/ p0 k
        new Vue(7 F! H. z- V$ i) O/ r- l7 }
            {
+ {: O( n) T; H* x2 j/ w1 [/ {' m                el: root,
6 o8 N( P- D4 b                data: {
" }2 N5 c# k( _) i* F                    firstName: '',
9 f  e% ^- w- Y3 h& O4 y                    lastName: '',
( p* i/ @7 h5 _( T                    changeTime: 0
! q! l' \, F4 @6 m                },
3 G* P. [# ~6 N$ {9 }" q$ f9 b. l                methods: {
3 _" t7 O7 t$ h4 A5 ~% ]$ l+ _/ B1 g; q$ o  @; H* `8 `2 c3 |' _" s7 G
                },5 H5 L+ @1 {! ?/ p1 j4 A
                computed: {
5 B# K% k, s7 X7 i& Q                    fullname: function () {. Z* z1 \- ^) Z0 o0 k; `
                        return this.firstName + ' ' + this.lastName;/ _- {1 o0 h4 }% c% y; ]7 \" |
                    }/ N6 e( R0 `) x; v, i" P. K1 {! k* j
                },
5 F! K  Z) j9 r# V0 [! b                waTCh: {: y& z' R- \% u
                    fullname: function () {
$ l# V. s& g" V1 l& p5 @* l1 X                        this.changeTime++;5 v& `" D! ^6 n: ^1 @
                    }
. U, E5 M. k/ f) e                }
# z' b! B+ g8 w/ W! o4 `2 [            }
8 K$ v$ B+ I# Y; C5 u) C        )
  K- W2 S0 J9 Q& q* T) M    </script>
+ P! S0 [9 K: b& t</body>
; P" N( X9 `( B( S1 D3 i; L, j. }2 f, B4 T. V
</html>
$ T' d! u8 N; l: ^$ f0 |# q
8 t" }) o3 z" E% b

+ L. B; T2 X" j1 O4 ?
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了