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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

, T# [. v& q9 q* q$ W& ~; O+ j! c9 q
<!DOCTYPE html>5 L4 D% r- ]5 Q
<html lang="en">* T1 t1 v( X2 Y9 J/ H
4 E4 w2 K0 h0 g% X
<head>
0 A: C6 g! e- Z8 O. O    <meta charset="UTF-8">
* O% A& ]2 |- u$ _) \& ^    <title>Event Bind</title>* D  Q7 Z3 r, J  l$ \
    <script src="./vue.js"></script>  v/ h! i/ B1 j# z) D
</head>
/ i7 I% u& ~; `6 X, }& A3 M- s4 m+ k7 i
<body>
" B3 L/ n, b" K& q' v' ?    <div id="root">; P& ~. W- H/ t5 d
        First Name: <input type="text" v-model="firstName" />( D4 J$ n+ p0 A/ Z6 C7 d
        Last Name: <input type="text" v-model="lastName" />
& [" \& X3 b- \, L- V* X        <div>; \3 \5 x: @4 c
            Full Name : {{fullname}}
! |( ~0 m" {4 r  _  O' X2 @: d        </div>+ |+ s3 R2 z- l/ e# `6 A+ H* Y1 z
        <div>
5 @: Q/ t. X3 [6 N$ x            <h2>{{changeTime}}</h2>
+ ?8 L8 S/ H4 p/ [        </div>3 s& o) R; b4 f. I) {- H, M+ b% J
    </div>
5 i! U. T2 k/ [    <script>/ @, n2 [( E6 c
        new Vue() o6 c1 H; `& P0 d& |8 k7 I/ L
            {
9 |; |$ A1 {, w5 {                el: root,
+ p) c3 n$ c3 j                data: {
  J2 h0 p6 A, a% K2 d                    firstName: '',
/ x& e7 ]6 a" X4 G1 b1 Y' f                    lastName: '',
, @7 a" }% S& l8 J5 _  o                    changeTime: 0
1 t. N2 j5 f5 H. S8 P3 w                },
$ x: ?+ K9 a: N7 P                methods: {4 L8 n+ J  G1 m' @

6 T: ?6 q. X3 [6 \! W9 ~( A3 ]                },
- W, G$ u6 t8 _  G/ e! R% _1 \                computed: {
/ q* j2 {8 a% u( K/ B                    fullname: function () {2 m. Q; |3 b$ b) k9 u
                        return this.firstName + ' ' + this.lastName;. W4 e! y' @/ g8 l% A+ S: H
                    }
# T! a% G$ E  N                },0 n( Q4 j  Z! Z
                waTCh: {
  @0 Z0 M5 J3 ~# h. t                    fullname: function () {
: C. P& D$ l$ y2 U                        this.changeTime++;
4 V/ z- ]* |' T% D7 t$ _: ~7 E0 o; n                    }3 g$ o( E, Z9 {9 Z; L" P
                }! U5 L5 N4 z& Y
            }
; n7 K& M1 `9 C1 [/ R& x" Z* X        )% j/ [$ P' u" p* t5 F4 T
    </script>; ]2 X! f# P; I+ S7 w
</body>5 N9 w" C* V8 k2 o3 P
: |% a. F7 W5 \+ Q( p$ L7 M
</html>& u8 p1 E- l* s; h( x2 m
; C! `9 M5 i* w2 Z0 m- O" ?

( X3 e9 m2 F  D7 m3 R0 W  m) q* m$ A/ 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二次开发专题模块培训报名开始啦

    我知道了