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

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

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

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

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

x
  X$ F# I9 o% Y, I. W8 P

$ `2 q8 u$ Q7 a- h<!DOCTYPE html>
+ S3 l  D/ D  {<html lang="en">2 U8 W0 w* ~4 s, c* W

2 D$ X* I: F% `( N8 q" i<head>
- d& m9 _& j" G% b$ ?9 i    <meta charset="UTF-8">/ @: N/ ]5 C& R+ N+ l1 C4 O3 B
    <title>Event Bind</title># g) L/ Z3 ]1 S  S# e, l
    <script src="./vue.js"></script>2 r) l$ n& }; u& c
</head>
6 ?9 _7 i5 K% L- F/ P3 W$ D; X  Y: X6 c: R* o: T
<body>+ d$ n; o6 K$ u" F1 ^
    <div id="root">2 Z0 J( C2 q  |2 m. s: z0 S3 f7 r
        First Name: <input type="text" v-model="firstName" />. T" u) o, R/ L% g- i
        Last Name: <input type="text" v-model="lastName" />, h0 ~& V6 V1 w! M& ~
        <div>
% @" h9 [, h: D$ L/ U! u- J5 e            Full Name : {{fullname}}
; W5 P) _4 ^' u% `7 l* f4 u; v' {7 g        </div>
9 j' y) M, Q  v9 K8 d. P. r        <div>& j& R9 V6 k; m
            <h2>{{changeTime}}</h2>
3 Q! A( B) B, j) v" W        </div>
4 O* r* p! H% l  t% ?, f    </div>) H5 P+ P9 z3 `2 w# Q+ r, \
    <script>; O) M+ z. n# N
        new Vue() ^# n! Y6 s" \% w9 j+ o: v6 b& e
            {: r' q; H! t3 G4 f
                el: root,* @, ]  b" a/ F9 k9 _' I0 \
                data: {. F5 ?1 N7 ]5 W0 `) J: E) D
                    firstName: '',
# P* o" P4 r* M& _                    lastName: '',
: R# {7 A4 M* M; h) [                    changeTime: 0
" {8 r5 Y7 G; U" C% T' N: V                }," z# r( b) n8 R  f% s: j
                methods: {
7 N- }: K) g, A3 q' Q2 o& l" R% D5 c; Z. T8 \+ \
                },
! i% z9 R4 f- M- A4 e                computed: {
8 o3 }4 K3 x2 g  J                    fullname: function () {
' U4 l( e7 L3 G4 r  e" |+ C0 H                        return this.firstName + ' ' + this.lastName;: U% _) {4 W- U! P/ P, r
                    }
3 U, W2 T6 N; f, U! m% u9 R0 v" Z                },
' K( t" c8 F: b                waTCh: {
5 c: \3 Q0 I7 a) @( i$ u                    fullname: function () {
4 P0 c% Q, T. h1 T9 J4 {                        this.changeTime++;
4 X4 j3 L  _# _' i$ p  t- g1 x+ v                    }
" `* {0 b1 Y+ `3 ~8 i                }: V& D$ o  ~+ n$ h& }
            }$ u9 i8 [9 {) ~' R3 N
        )
! N- u6 I$ B( q6 T( b8 s6 d9 }' J    </script>
% R' w8 c& V4 e7 t9 g# d</body>
$ }5 J2 o1 D4 _5 ?3 i
2 O% h) m- P) d& F3 @/ q5 e6 ~</html>% S" B7 g+ E- N; E
  ~& f  v; r. \5 R/ ]
+ p: t" Z* j3 \1 v1 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二次开发专题模块培训报名开始啦

    我知道了