PLM之家PLMHome-工业软件与AI结合践行者

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x
& s# g; p" U& j" F
7 I; _! q  u+ n3 b
<!DOCTYPE html>
) U+ K9 v7 h& q: H<html lang="en"># y7 a9 b  M# l) N: G  O

# v. a6 R9 z& v3 `: s5 y' D* G+ `$ E<head>* i" |! G$ `/ p
    <meta charset="UTF-8">/ W+ F5 V+ z, B
    <title>Event Bind</title>
! C" Y$ V0 A1 E! L    <script src="./vue.js"></script>
7 \, P2 V% C  r/ B; e! w, X</head>
/ Z3 l" ], o8 W$ ^. f$ S6 e% J
" p  E$ O7 B" l/ I) O<body>
! l, g6 K0 q* P& X    <div id="root">" B( G1 Y2 J! D  [
        First Name: <input type="text" v-model="firstName" />/ F* U8 W: Y9 T5 N
        Last Name: <input type="text" v-model="lastName" />/ K; @4 Q3 B+ b1 h8 P( R
        <div>4 X. ~  {- e+ H9 [
            Full Name : {{fullname}}
; q4 ~& p- b8 w; L8 q& {        </div>
& _9 @5 M4 j' F+ W2 _3 e2 S        <div>' `1 S& @7 p, W* @. r( E
            <h2>{{changeTime}}</h2>
; h- w) h% M& u; T% q        </div>
: B4 L$ B, R0 C1 ]    </div>
% u7 Z) D. F9 \# C( G0 p4 ~    <script>6 n- o1 J/ T1 A( \' K
        new Vue(( \0 J! G2 e( q, r% Y
            {: R' R$ a. \/ v- S9 ~  S# N, ?) p
                el: root,. ?7 @8 w3 u, Z/ R
                data: {( H# i6 j: \- \" [- j
                    firstName: '',
( k+ t8 h0 P  |; h  e5 Q! ]. @# N                    lastName: '',; a3 G  x+ X3 Q
                    changeTime: 0/ j5 ^2 l# y( D1 C  Q$ J$ b
                },
0 t  F7 |) P6 C/ i                methods: {
' S! G) W/ c% E, i2 R  M; Q* b9 D* f2 V- g& C4 _% @/ t6 Y
                },
# Z$ E, I7 S0 j) H4 ~# g7 u6 c7 ]                computed: {
( t4 u3 v! i$ ]7 U6 C                    fullname: function () {" z& e5 c; W: c' U; d' B) ~
                        return this.firstName + ' ' + this.lastName;
7 Z9 c& {8 X7 y- _, T9 |* R5 V                    }& P, Q2 z  O0 H9 x4 ]' z# Z
                },. t% [& W$ k- b
                waTCh: {
6 P2 M9 N& f5 z6 A                    fullname: function () {
3 o" e$ V4 Y$ P                        this.changeTime++;
0 J! [, B# r4 Y' j2 _: P                    }3 d  p) O2 w5 T7 X( K2 n6 L
                }
% C7 F5 h% C; b+ O0 ~% t& T            }
' ?, I& I2 o! O        )& K- g- ?3 X% a
    </script>1 t* s; D: d. S3 \% P+ _
</body>
/ |2 F  c; g8 i8 J/ G4 D- \) U. F$ q, O' G' m' ^2 L* x* j
</html>! O; o: i9 r  y! O9 ?/ b3 e: ]# W

( N. }) i8 g0 o' B: J% l. _4 O- }  e& X
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了