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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x
$ D* E: d$ ]: j" c. Y
! G1 ~7 W+ T6 k* d# Z
<!DOCTYPE html>( ~; s+ b' d' j
<html lang="en">) i: r* V: ^% u- K
0 _* Y1 _- G( I" Y# D6 Q
<head>
2 c3 w& T5 f' x6 I5 o* Q    <meta charset="UTF-8">1 t" \8 d. f! \5 i- l9 h) L
    <title>Event Bind</title>9 f1 g  G5 U2 P4 A. E4 W
    <script src="./vue.js"></script>
* U2 q2 Y8 i# T3 i</head>
2 ]6 I$ ?8 ^' h4 ^& _1 \! ^3 ]0 j+ C8 k8 G
<body>/ n$ @% |5 b' Y$ G
    <div id="root">1 p7 T5 E, {, |+ P. y
        First Name: <input type="text" v-model="firstName" />
1 ~- i1 i1 X" f) R        Last Name: <input type="text" v-model="lastName" />8 `9 v& G. ?! k  g. k, ]9 p3 h8 G
        <div>. I2 M8 [" G) q$ f$ a$ l
            Full Name : {{fullname}}; V: L- }8 q4 E. X8 m. y
        </div>
+ {; o: `: G7 c* ?" M: ?6 h        <div>
. h0 u& c# P, R- i: g- K2 s            <h2>{{changeTime}}</h2>* a+ R1 N6 o- J- M% L6 b! b6 S% n
        </div>* U, q6 @# Z7 Q4 D7 e
    </div>
# n! G4 s, K  {- k2 A% E    <script>
  h3 q: i$ H" w        new Vue(
# N* t# b( w' P8 E5 ?8 X            {
& d: B* k" r6 Z: V7 r" e% Y                el: root,
7 f( O0 f; c4 {" [                data: {/ o( I5 |4 I- J% N" X* P1 K
                    firstName: '',' x8 m. w* `5 r8 a7 @
                    lastName: '',* o/ R6 f3 J6 g& e# G! \7 n
                    changeTime: 06 S8 o1 r" `" k. _* {+ T
                },
  b/ v' B# W1 ]/ X9 Q) Z                methods: {
, E$ A' X3 o) d, ]# m; o4 c4 k5 q. J- i; ^
                },# B$ J! U0 x- M" Q
                computed: {
3 W( m2 Y- J( w0 e. T                    fullname: function () {- L! |( m* d! a8 I- L
                        return this.firstName + ' ' + this.lastName;
* J3 y9 F# C% w2 w) E                    }. p6 Z( c9 v: s7 V; g& w, Y
                },- U1 U$ i7 T* W" c
                waTCh: {
7 [; [4 i; i* p' S# o' o                    fullname: function () {6 t' {* f4 k4 p( M. j
                        this.changeTime++;
" b$ z" f" C$ A6 q                    }6 z2 q, I8 D. Q
                }; m9 H' Y& W5 j" T+ u. x
            }
) U# u6 N5 g9 K6 h) f        ); s. D+ p3 e6 w, I- b
    </script>3 T. u5 I" s3 v6 c4 r- P) g; `% N
</body>
- a2 T! f9 b$ O
$ b0 y1 H" L5 B( o& v</html>
' C, F' g% ?1 Q5 P5 g, [; M
- T6 N' }! A' {2 R0 `

; i% w# X" k: `* @% i, ?
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了