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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

" @$ z) \1 P+ _* G
' R8 l7 i9 S, H) L! U5 R6 @<!DOCTYPE html>5 u; p- [; {- {* o6 S1 z6 i
<html lang="en">
) H7 W3 q' _$ q: ^0 y! w  u* X/ o% ]6 z5 b4 l
<head>
' L2 v; Z2 o3 Q8 H    <meta charset="UTF-8">
5 [5 I8 @* i2 e, ^1 @$ W; X& r5 w    <title>Event Bind</title>2 ~: I2 e( ?3 F/ d( K# z8 C- N
    <script src="./vue.js"></script>, y) E( @, n" o. A: O1 C9 q
</head>, M2 b$ n: t3 J; q
0 N3 g* u6 t* |8 A+ A" M" q3 C
<body>2 H1 n2 D5 u' C4 k
    <div id="root"># w! l( j4 a4 m- E9 d
        First Name: <input type="text" v-model="firstName" />
: c9 w/ }0 |4 a# X' x0 E( R7 `/ h        Last Name: <input type="text" v-model="lastName" />
5 w9 ]& \: ?3 b: c8 V) f4 C! b        <div>2 z( G" V0 D- Y: _
            Full Name : {{fullname}}% Z! i) d% ~3 b: R7 u
        </div>. j9 n) n# a! V, P1 r9 S, ^" n& B
        <div>  i9 }9 E+ b  d+ n1 L* z
            <h2>{{changeTime}}</h2>3 A+ D' a3 U7 ~) b9 N' s9 [
        </div>
* ^0 x$ D  b; i% A    </div>. k8 S$ W' y) q0 N6 ?* z
    <script>
* z# a2 N$ S( w        new Vue(
; H$ ~( B7 ?* I            {2 j) B5 C3 J+ ?/ [( e7 L5 s: j
                el: root,. Q% j: b% x' v& ^+ e/ K# d
                data: {
9 E% \+ a% a: ~% T$ _( c                    firstName: '',
' G8 r; o; e' A6 m, B                    lastName: ''," J; p4 ~( M9 c3 Q7 X- `
                    changeTime: 0. ]/ z: D' G* k* j3 h; Y; l7 |
                },2 G( A' w/ m7 y+ K( c7 A) I
                methods: {0 Q. J9 R& i. U* E7 d  A
6 ]% r5 G; F& t1 l- ]$ r" H
                }," z& [' p1 F' t. g, u
                computed: {
4 e* I9 Y5 d4 ]% d/ g  O' T7 r                    fullname: function () {
( E! `- w7 p4 S0 I                        return this.firstName + ' ' + this.lastName;
6 j) E* i) J4 s1 ?/ x; q6 n7 s                    }
& m) e" H" F( \: t4 s* |  q" ^                },
. q0 e# H! J7 `6 ^( G0 v& l                waTCh: {
. n* a$ w) V, H. b                    fullname: function () {
+ M% j( D" A! H! a7 a                        this.changeTime++;6 n5 [3 u1 Z! ^: S  o
                    }
' i6 G2 P4 ?9 b! t; w8 |. g                }6 A) w6 j; c" d+ g5 @- ]( G( p
            }
& A' J( ]- H4 o  }) b9 g5 k        ): ?$ R+ F9 B7 R6 Q
    </script>
! [# [* W" d( y- M$ x  E</body>% X( h* r$ h+ T! [( k( `

4 m  x) T6 l0 x: K7 j</html>( x3 W1 }4 }5 U$ r! f! ^
! p& y5 S. m7 l) h1 o5 W

  `' r8 [! L" h$ K' l6 u7 j& f
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了