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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x
4 l2 T& y5 X  U( F$ t

( P$ m' ], `: W3 ^2 l: i: X' k" j<!DOCTYPE html>
1 n- E0 O5 N: k6 g5 M, q% w4 {/ B/ n<html lang="en">
8 D+ O( U6 G; D1 M' t9 T' ?* [! m9 L1 j8 T3 T! q$ h! z3 g3 D$ W
<head>
3 `4 y* N1 ?/ s, J- |) X/ v; ~    <meta charset="UTF-8">
- U8 P4 b# p  B9 a  y9 Y    <title>Event Bind</title>$ A, P! X+ L) O8 f- q
    <script src="./vue.js"></script>
$ X* `; w" A( o: x, o8 N4 @$ I! e</head>1 j/ E7 t, P4 H8 x
6 s$ K. J8 K! N4 H3 O/ x5 `) J( j) F
<body>
4 y! D- J* s' V' i    <div id="root">$ N2 _2 m; `  F( _# d. u! |& |7 G( t
        First Name: <input type="text" v-model="firstName" />
+ ?  Q4 \7 N7 c& d        Last Name: <input type="text" v-model="lastName" />
, v4 ]9 e% U0 R6 ^        <div>% ^) B( \! G9 p4 n2 W; J
            Full Name : {{fullname}}
+ Y4 h4 s$ @0 c        </div>
( U9 Z/ ~3 `3 F        <div>7 Q( ]; X+ @1 c) [
            <h2>{{changeTime}}</h2>3 T) j. F1 L  _% s
        </div>4 l$ l" V) m5 v, s( q) C. d
    </div>
( z/ O* a; |) f: |6 V  U1 P: ]7 u    <script>. P+ [: t9 x! c0 w4 C# I$ V
        new Vue(& t4 ?# T. H3 y4 u5 m* c! k4 [
            {' l; k. j6 ^/ G8 s
                el: root,+ Y) O  T$ t# d2 T9 w4 |
                data: {
7 {& Z. a  C! f                    firstName: '',
  E6 k4 m( Z% p" ]                    lastName: '',
% ^1 _0 f6 z4 U6 \. p                    changeTime: 0
6 E& P, M* w, a4 m( W3 W! ]8 M5 ~                },
" X+ l+ k6 H' n6 Z                methods: {
! v3 ^- j! l! a8 p  n5 Y5 Q5 b2 y/ |) |' o4 x' B' a6 U
                },
8 X0 g$ O2 A0 _! ]( H1 P  J* i7 y" P                computed: {
- y: `) g/ V) p2 W                    fullname: function () {, w9 p( h+ m2 d" }8 z4 i. @
                        return this.firstName + ' ' + this.lastName;8 d* F& _6 h5 P1 s% @$ H6 @# l% q
                    }; v4 M7 u( O1 D" o
                },
+ A& G* f8 }! T% \# a                waTCh: {# |0 S. s- ?9 L: B/ q
                    fullname: function () {$ A; o& A1 \3 U/ D0 |( J$ K# O: }3 q
                        this.changeTime++;
# b# z  c6 ~" s4 `) ~/ ~3 {                    }
' p# W5 d' W, {0 M2 m                }
7 G1 F" l& n) |* F- g- u& F            }( _- h5 ?7 f/ o4 p1 J
        )5 `6 l$ Q/ a4 ]2 s2 N! Q
    </script>* Y% e) i+ c# q, a# \
</body># m5 @6 U- [8 e, Z! g, H
8 q) k' J; O# l; E
</html>! s, l7 K# X# I* a* g; }( L2 m
4 N3 V- }6 F) h
+ J, m% [/ [5 O4 x, C$ q. L
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了