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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

5 ?" U# q5 g1 z# E- J3 H, y( G9 A# C1 L+ ?  l
<!DOCTYPE html>
6 u: I& F  I/ n<html lang="en">
7 ^+ |4 q) K8 S( E
" B9 H& z5 d. O<head>
& e. M! Q4 t4 r( i  r    <meta charset="UTF-8">
! P8 X- j. @5 H4 @    <title>Event Bind</title>) P0 |: D1 H: Q- A3 _- R
    <script src="./vue.js"></script>
5 \3 y+ f* A8 P$ S# E; [7 Z7 X</head>
, k$ W: ]( b- Y9 T
1 X4 [) a+ g9 ~0 X9 U' H<body>3 ^" x% ]3 m1 z% _! x% l: N
    <div id="root">8 ^& R6 `3 z* ~
        First Name: <input type="text" v-model="firstName" />
& U  K# d$ E# a* n8 T/ s9 N        Last Name: <input type="text" v-model="lastName" />
) J! r' i5 C# x! q        <div>
6 e" J$ h$ \1 r            Full Name : {{fullname}}+ [) J# k( \5 k) z, h  ]5 O: T
        </div>
3 S* g  N" L0 e6 i+ ^( E& K; j7 ?        <div>7 n! V' V+ W% G% [
            <h2>{{changeTime}}</h2>6 x. I" p5 n4 o- n* e. P' Q8 J
        </div>( }2 y4 D& J: ], H0 Z
    </div>
' W- g" G4 y$ ~. k" h) g# g    <script>8 j, _+ p: j: _. v3 A. O  m7 ^
        new Vue(
) I9 r$ h2 v' Y3 }% }! K) D            {
0 q! s5 H7 h; y0 T                el: root,, a% B# v9 T- f
                data: {, g+ f5 o2 T/ q3 s8 l
                    firstName: '',
& d- u% O9 c. _, F2 v3 H, [                    lastName: '',  n  h! F' O5 O
                    changeTime: 02 K+ q; K5 |+ g) E3 G, J
                },+ O4 Y. J$ s/ k  v/ [2 B2 k
                methods: {3 Q( d/ p9 J1 L) R2 e& H9 T

! `7 q( C" `% O# \+ n                },
. {# N  q' l0 y; P- q" L- y6 [                computed: {8 [2 X  p# H3 w. u$ ~: c' m( A3 j$ N
                    fullname: function () {0 R# z3 N  e3 x) T" ?1 O- d
                        return this.firstName + ' ' + this.lastName;
* ]) S) x8 I' T* G7 d                    }
9 P/ c8 _& l' J; C) u% C0 s4 a3 m                },
- v, C3 |( M) L2 A1 {                waTCh: {* v1 D4 G2 `" M/ Z$ D
                    fullname: function () {
/ f/ }( E  B0 F& D( ~; a* }                        this.changeTime++;1 \, T8 B6 h* ?: r* @+ h9 y$ W6 ^
                    }
4 c. m# e( t  [% \3 t9 t                }
  ]+ q, u) q( e& \8 p* e- K1 X4 x; i            }2 ^0 u* X+ M- O" E
        )* x+ {/ [% @) ^# |( l
    </script>
" {7 w: b; @0 f, a: K% i/ |% r* g2 G</body>! m! G3 s' |. ~, O% ~

! _$ {: _4 J' \/ m</html>8 y+ |$ R$ q5 t$ n( M4 i

( O$ U) G( y! M# d+ Y! N( `' a7 Z( Y* ^  o5 `2 ~% Y& y8 b
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了