PLM之家PLMHome-工业软件与AI结合践行者

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

* `$ G8 ]2 V  M9 V" k4 I) E7 ~, @
1 }2 }( w4 h5 K( a0 w+ A1 {; x<!DOCTYPE html>
) Y" w) |* m) C8 x<html lang="en">9 v0 I' P% x! {% Y. d$ x. D) a/ F$ w

! B' ?" F6 H9 I4 k<head>7 ?) ?( O# z' C7 ]4 a
    <meta charset="UTF-8">0 d+ Z* W' o& }
    <title>Event Bind</title>
4 F7 D, q, U' {6 T    <script src="./vue.js"></script>
) x2 I9 j/ k, X5 f/ J6 y6 j</head>4 C, k9 z1 p+ _1 f: H. F* `9 @& E
5 L$ J; g5 @. C0 z9 O& L1 Z
<body>  ]& ?' X4 H& z2 E& x
    <div id="root"># n1 L, M( A6 [6 q: a
        First Name: <input type="text" v-model="firstName" />6 h: x2 b5 }4 N$ H" k6 M
        Last Name: <input type="text" v-model="lastName" />
% l4 j1 e+ U; J# L9 s: Y        <div>
: \4 D' f" S1 u            Full Name : {{fullname}}
, O, a/ D: f2 ^9 j8 U5 L        </div>
% m( O' m# {' y$ {        <div>
1 B5 t' w3 b9 u4 V            <h2>{{changeTime}}</h2>
' x6 k, T  G0 O2 L1 H8 v* x        </div>- Y; S' ]8 \5 e3 |' a0 a
    </div>
: E; e5 p. `! z4 `  ]' B; z, O    <script>
' }: M) C- g9 F' A0 B  Z        new Vue(7 c3 T" y+ x* W+ |- E
            {. X& p6 q5 u0 q/ k- S3 e! Z
                el: root,3 C; n/ ^* J" O( p! R7 J
                data: {
2 Q5 k  I6 r* I/ X, P                    firstName: '',7 v% ?% v7 W0 {, K- M% w
                    lastName: '',
1 M0 r+ ]; M8 @; q) C                    changeTime: 0  B, Z" [! [# l+ _5 R' r
                },
. o% M- z1 D5 G6 S                methods: {
3 |" c( X6 ~7 P5 X  P, z/ j* B- h, l& U
                },) w. y) G7 w3 h  f. d' G4 D6 d
                computed: {
. T5 `, J: D2 i3 ?. w- O4 M                    fullname: function () {% `4 c/ x9 [% |" h) A+ F
                        return this.firstName + ' ' + this.lastName;8 i$ e- g, e6 z2 R
                    }
! [" I9 G, g/ H- u/ ^                },$ Z4 N/ ?+ z8 e+ L
                waTCh: {8 {3 W9 \/ I6 u- e: ^" d* w" [
                    fullname: function () {2 a; ?) x* y$ C
                        this.changeTime++;
- M) i7 Q7 J" J* s                    }# K! }2 G4 B. k$ D& P8 f- j
                }: k0 K8 r* q% V/ Y$ Z
            }
# `5 I0 G! r' t# {, A        )8 A; R% x6 W. ?6 s) M& g3 o0 U
    </script>9 `5 `" A# A& m8 t5 Q
</body>3 T' V, _7 R) c' V0 `

8 W1 Y$ R& M5 h</html>
* e" f" F( q( r) y  z- D  S+ S
. S5 M* A+ i" \4 s) Q
# [( C, @) B& R; a
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了