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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

6 M4 N9 K7 D( Q8 X3 |
3 R9 _1 d7 L1 c/ T" R! H<!DOCTYPE html>
. |& M6 `. N/ t2 L8 d<html lang="en">
2 H, b! |1 \& f0 Z
) f! q  m+ M! u; r$ r" A* W<head>4 ?; V2 N" ?7 C
    <meta charset="UTF-8">
! T* ~. N/ q+ b" {1 ]! G; V) Q8 V    <title>Event Bind</title>
$ ?% ^; ^- P, x# d    <script src="./vue.js"></script>8 l" I) D- ?  b: L( {
</head>. A3 G7 s& x1 D" G
# Y8 T! d% g' j6 I" D
<body>& v6 y3 M! [6 r) ]
    <div id="root">" A+ l. \. O1 }2 m3 C
        First Name: <input type="text" v-model="firstName" />% K; e7 Z- T9 c1 g
        Last Name: <input type="text" v-model="lastName" /># r/ z% }7 E. ^" D, }
        <div>) o. v9 `: w' `$ ]* ~7 E
            Full Name : {{fullname}}
$ n. s( \4 x3 C1 t3 e" }        </div>; L3 s' h9 S' X# I
        <div>
# a# Y% Y- n# S! ~5 _$ K            <h2>{{changeTime}}</h2>) q2 ~% ^! H, K8 E: Z
        </div>+ a' [. j7 Z; r; f/ d  e6 J
    </div>
( j* p5 o$ X* q2 {' l: @3 |1 n    <script>6 \$ p* f2 {0 `0 n! q; o9 j) `. [  v
        new Vue(
1 }8 `0 L5 b' j" E            {* q/ n. `' l! B; N9 J+ ]
                el: root,
# Z# e1 z! Z  Q$ E2 O0 E                data: {- p6 `" B- j9 \& D4 L+ R; ?- l7 H
                    firstName: '',
  Z' r9 s0 w$ H% H# t" B                    lastName: '',# K" h5 Z$ v* Y  e+ [6 y; a& l
                    changeTime: 0* C3 J) ]* A8 P
                },$ x: y/ |! i+ y2 k" Y' u4 O  c% g
                methods: {3 c0 i  U8 R- J/ }

+ w+ D" I$ i  Z0 E  I                },6 l; P& |5 A5 ?* r" W* l. N$ V
                computed: {. z3 A! u7 s, d8 X$ |+ _
                    fullname: function () {
% I* V5 h( m8 }- V! H4 S                        return this.firstName + ' ' + this.lastName;
9 h+ V% t1 B: Z                    }; ~# ^( A" V; w5 [; c2 C
                },
5 D9 O! z# j6 e                waTCh: {* {. K% w1 i# @
                    fullname: function () {
  M/ A+ [% M) H: G6 n                        this.changeTime++;
% w) ]1 A: X( X) P" S% d8 ^8 x5 S                    }- a- E$ e3 \7 K2 O5 J& W; q
                }! K+ _; `2 C' E' b
            }9 x7 R4 A' V* Q7 l% O9 w
        )
5 Q3 `9 S0 X1 J, V! j    </script>
6 W7 R$ N' q; F9 \, A9 B3 z1 j</body>
6 c5 W3 |. G1 ^- M0 N9 t7 N: `, z
</html>
9 [! ]/ G" ]/ v0 N5 F. `
7 q- t7 P' z# v1 E+ G

- Q. O9 S4 n% T9 ~
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了