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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x
1 p3 }% X8 y, n: e
3 y/ Q# e/ M* P
<!DOCTYPE html>. i% D9 `. d: Q0 x7 I! L3 B7 }
<html lang="en">
3 h+ q$ M* `9 y' e9 ?. k( G; J
" [' ~  S1 n  H<head>
4 X8 ?/ D1 a! x9 c4 v- {  E/ Y    <meta charset="UTF-8">
, u* \2 r  A1 k    <title>Event Bind</title>
9 Y% V, }( ]: ]7 K    <script src="./vue.js"></script>
9 u  ]  h9 \% |& r8 ]</head>. _0 t9 O$ `1 e) [4 r

" t; p9 A- x1 Z5 R$ N<body>7 F7 z+ X% n* S/ }
    <div id="root">4 F: A7 A6 _& _- X
        First Name: <input type="text" v-model="firstName" />8 s+ |/ p- V( b/ x- x0 f. d
        Last Name: <input type="text" v-model="lastName" />
4 @4 o4 _3 [5 L( k, K        <div>- k1 [+ l3 f1 D
            Full Name : {{fullname}}! M; ]# J+ P0 |
        </div>* D+ j# q1 @: B8 r
        <div>
4 n# e! K2 j# d' A            <h2>{{changeTime}}</h2>! U% N; s% J4 Z
        </div>
4 j7 c2 y( Q8 j    </div>
4 v. L% ]+ T9 @& h& V) F2 U    <script>
+ A1 b* O. ]6 F+ D        new Vue(
" R# {  E* e( l2 u9 O            {
* e- t7 u  o0 y4 b3 I                el: root,
# o) i8 G( t) _8 W. ^                data: {
/ ?$ j! P" a5 W; ]                    firstName: '',
  ]3 ~3 r+ u* {. C& D  d4 D$ Z/ r                    lastName: '',
% D" d' E+ R# r. K- A" g4 d                    changeTime: 00 i! U1 B3 v- T" {
                },
1 n7 E, ^: c# B& z& V) y6 y1 [9 K                methods: {/ ~9 {( h* Z( N' h( X
: l) ^/ i/ q$ w* |1 z
                },; q5 t( a& t7 s5 U) u: ^
                computed: {% T7 I  c2 i3 J* ~( s  m. ?
                    fullname: function () {5 j  |2 ^' ~3 s) t% U
                        return this.firstName + ' ' + this.lastName;
  R7 f4 Y0 W" ]4 h+ h                    }8 W% }1 l1 W% w. U9 ?0 M! K( O6 H
                },. b" j! L: P5 U/ v9 o
                waTCh: {
. m& s* r4 n1 q9 h                    fullname: function () {2 g: j6 j" E6 V7 p8 k! w
                        this.changeTime++;5 E/ a$ H+ u/ V8 }8 Q; j* Q
                    }* U% _8 j2 A9 v* b8 m% I
                }
* _$ \& P' c5 o            }
0 l( G2 I  N; R) N6 Y: s$ P        )
6 N" o0 `, _0 t" d' K& W    </script>
& v- {( U0 R: J; C% c7 M</body>" ?4 i; |# t/ X$ i: `* z/ H# c* j& `' F

* ]7 J( I7 ?- N, F6 ~/ _</html>- b0 d; [9 F1 d4 O8 s  a) Q
3 i# r# ]; p. i6 t, N2 P# I6 b
0 V0 T5 T& _3 F& x' Z" C7 T+ |0 Q1 J, K
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了