PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

积分
82166
QQ
发表于 2019-8-7 09:29:47 | 显示全部楼层 |阅读模式

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

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

x
: a7 h3 ^- ]; l% {/ S% {, w

4 y6 W/ i: T- s# V  {<!DOCTYPE html>; p- p7 z' F3 T% _+ i* w6 E
<html lang="en">+ h! s( _2 T$ l/ K9 g$ S
' ^: b  M& U- j# o+ t
<head>- N5 F( n! R) \" x
    <meta charset="UTF-8">
; A! v1 j+ N! o0 k/ s# Y4 q    <title>Event Bind</title>/ B- M# q  N! T1 V  h1 [8 ]
    <script src="./vue.js"></script>
' Y3 d; Y$ g/ {2 V: G$ u- d</head>5 t, C) x. m8 k, V% P; e

6 u, W% n- w/ i, M# M<body>
2 N4 ]$ H& {7 ]2 B    <div id="root">
: A) v4 O9 ]. [3 \8 H- N' k4 C        First Name: <input type="text" v-model="firstName" />7 q2 n6 \/ B9 L6 [, x" m# g
        Last Name: <input type="text" v-model="lastName" />! ^- X0 E8 A0 ~0 M( v
        <div>
! X! _. I5 a4 d( O" C9 b            Full Name : {{fullname}}
; O% \' e% n4 D+ T, h+ ~2 t! Q        </div>+ |% p  q8 U( W
        <div>+ H, G' K  f+ u. I
            <h2>{{changeTime}}</h2>/ O: M' Y4 I! v$ W7 {
        </div>9 N- D" I! N: c5 P, ^9 V) V+ t" o
    </div>
7 t5 q. U5 z0 b    <script>7 _' R. g- r* \: A: h
        new Vue(
0 }$ P8 W( @3 [$ u8 L            {
  D4 w; \' R" l5 l) Y                el: root,
/ g; w4 @7 R3 i4 [7 i2 ^9 c( E                data: {
$ f/ e. E& z, U  n% z+ k8 j                    firstName: '',
5 I5 H, X+ L9 L: b" {: L9 w+ N                    lastName: '',1 A8 B6 o1 V5 K
                    changeTime: 0
, R6 n, ~( f+ @( I. q1 X                },$ l5 N" e% z) E' A' D0 F4 v
                methods: {
8 s- z. ?5 Q! }$ l: w8 J) }1 D( ]4 Q
                },
, q% P; D3 c4 ]8 \                computed: {3 s; B6 k! M- D
                    fullname: function () {) P/ R! @. ^+ J: |
                        return this.firstName + ' ' + this.lastName;
& u- C& `9 f4 [# V5 U2 W                    }1 D4 B, E* w$ J1 V. F; e9 ?
                },( s+ C+ W! }* v8 P3 n
                waTCh: {( f: x! x6 R) X/ |
                    fullname: function () {
; ]; X0 y- F( V: u                        this.changeTime++;
4 i/ v  ~& \8 s3 W" `                    }3 G: Q; c( O4 N& G- N: h" @8 L, f* S: o
                }
+ q& g8 K, Q8 W% B7 t- b; s7 ~            }
$ Z# f$ g- @+ L% a7 F5 |        )
9 p3 [8 m" k# w    </script># v, K1 u" Y7 F7 A  J
</body>
2 Z* l* _3 ^2 C5 S* p! h  M  ~7 e( z' Z
</html>
) `$ s# |; P8 g/ u$ q
( g* R/ K6 O8 x; N/ H- b
$ W3 V/ a2 T2 |0 F' \# j! p! N
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了