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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x
9 f6 j5 }& A  O  o

8 ?. M: n9 m9 X: I<!DOCTYPE html>
: \/ `+ r9 `' t' O7 ]$ Y4 |<html lang="en"># f: f# x7 `0 j' C5 ]3 K1 w% \
3 a) s  i& ]  v0 F1 r4 B1 T
<head>
8 h  q# z6 P8 _    <meta charset="UTF-8">
  t6 [# `' r3 b4 l0 B2 C: W1 h% J    <title>Event Bind</title>
; U; d" R$ C4 v+ _    <script src="./vue.js"></script>% m9 R2 N) i& @0 v9 C
</head>
- M' Z& w. N* p3 i4 e; N! [( X$ N  [! \2 e) h% x4 ], @3 l
<body>
3 j7 L( v6 L5 D* L* A! F7 v$ Y2 \( p    <div id="root">
% [3 G# M8 j) ?, J) u1 o9 V        First Name: <input type="text" v-model="firstName" />$ M- k6 u& j+ R! O2 S: R
        Last Name: <input type="text" v-model="lastName" />
( z5 R7 N9 H2 I# O( {/ w  u        <div>9 _, I, @/ H* [6 {/ f3 k5 @
            Full Name : {{fullname}}+ Z) Z+ y. t0 o. Y$ Y! F% Y
        </div>
; @4 p& n* P0 I+ @" D0 ]- b        <div>
/ x9 k. C; o$ K# \. ~            <h2>{{changeTime}}</h2>
. z8 J$ T& _; f        </div>
9 [# _2 K8 [) t( b0 X) p    </div>
. w/ u1 k$ F* l3 h    <script>0 p% Z# U, J: v$ Q8 {+ I
        new Vue(0 c( M: Q2 l& v, F& D) y3 i, s: k$ C+ T
            {
, g. h9 x* n; S% F+ |                el: root,
3 R; J. O* p2 l* e: Y) Z9 ]                data: {
% a$ i- |9 L+ L. P# f6 k                    firstName: '',, Q* C9 F' t* m  W* n6 N5 |
                    lastName: '',7 m$ _+ n6 ]" `0 N1 f) _
                    changeTime: 0. u9 f2 O4 }$ |+ f5 E
                },8 K9 P# n) }& B; X4 }1 M
                methods: {/ b& @9 m7 h  Z% g3 j2 B  R

  S- H& Q+ \+ j! N. l4 B& w& W                },
; |/ d% [! G3 }                computed: {! o* M% ?3 r* k0 V. g# N
                    fullname: function () {3 K6 {% g3 v" Q" k) z
                        return this.firstName + ' ' + this.lastName;
8 i) D8 K: Y2 L                    }
# R" N: E6 p% e# H2 @: u8 v                },
3 ^/ b( D4 M- g: h# N3 {# }2 i& U                waTCh: {
# [8 o: i9 _* B                    fullname: function () {- ^% v) X  k- A" c
                        this.changeTime++;6 w" \+ K; ^+ \
                    }
. B1 y' ^4 v" M; N                }' @7 x4 K# ~0 n
            }+ W( Q9 q4 u0 l9 C
        )
* I) x6 n" ^) i" v' h6 ?2 q( K    </script>& o& ?& ~- H7 W( D! @- T$ B3 c, d
</body>
8 ~# \) G  V" U; T8 g& b/ c: ~  Y. a8 J
</html>
8 Q2 u3 A0 s! c7 m5 B5 ^4 [! S  P1 [

; @. q7 h2 Y# m- I- V( W! W7 g) o  _: a1 r5 E
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了