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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x
5 |2 b7 I' R) n; I
7 N! t' O/ g% y7 W4 l
<!DOCTYPE html>
6 `, {1 ?. Y+ E- ]- r; q<html lang="en">* u0 A9 v7 H8 X# z
7 y& ^/ ]4 Q7 A
<head>
" P+ P" l! q# S  ?% Y" {9 u6 F7 |    <meta charset="UTF-8">- S8 D4 T+ Q2 M" r) E3 {. U
    <title>Event Bind</title>
6 O/ ~7 V1 c9 [5 Q2 ~( L6 M" \    <script src="./vue.js"></script>% T, l; {$ R. v6 v
</head>% }+ x9 O* k& b; G8 g4 ^

3 j9 C" |# L9 C<body>
. R/ e  U5 z7 U8 ~  U1 o# F    <div id="root">  Z; y2 h' S: ~  w4 S  y! n
        First Name: <input type="text" v-model="firstName" />9 f" T% {$ N2 A: O# o* w" V: n3 n+ E
        Last Name: <input type="text" v-model="lastName" />
( k) [) L% G( W        <div>0 h4 T3 Z& |' o) V0 S7 a- _
            Full Name : {{fullname}}
: A: H8 ?( F7 u        </div>% m, {, [- h0 F( c- D& S: o& [
        <div>5 j, |0 E' L/ P8 @$ |+ I
            <h2>{{changeTime}}</h2>* h  H% h; h2 A" ^
        </div>
" J* Z2 ?9 e7 s2 @, c3 d% V    </div>
3 w0 h% o1 S7 O+ K+ r/ [* l+ N# P9 S    <script>
' w5 y5 ?/ H% o5 ?$ u; A        new Vue(
% n! G+ O! l3 o* B2 a5 h; H( l% N            {
. i  P5 N1 M7 U' C  h, F                el: root,1 Y% P$ R0 ]$ B& {
                data: {. b9 c- L# y) N9 f* K+ l( u) y
                    firstName: '',
2 F8 D/ k( m: B1 Y0 ~( G                    lastName: '',: H/ K& ~! T, m: ^6 ^7 f: Q
                    changeTime: 0
+ W) w4 C! Z* d$ c+ l  Z                },) ^# W" Y9 z+ h
                methods: {( ]1 x% X9 F0 Q8 A

7 R3 J. a) L) A' Y: s4 G                },
, d+ }- W4 ]% v6 @                computed: {
8 q# n. Z; \, w                    fullname: function () {
* g! P: Y) {9 N- A  d                        return this.firstName + ' ' + this.lastName;
  D; E6 l% C. c                    }
% o, C! K  u1 o$ f) {* k, y                },, |1 T5 Q0 [3 j( v2 u4 f
                waTCh: {
- G, N7 }+ s4 v2 M0 i# n. N                    fullname: function () {
+ l# |, G- E2 }' M" Q                        this.changeTime++;3 h$ A3 _! c5 e5 f# X* y$ V
                    }' Y. _6 t6 b8 ~5 ]4 w2 Q
                }# y, S8 c2 E* R3 [" |5 `7 R4 r6 j
            }
; y+ |4 M6 e5 b* ^! q- h        )
. t' A9 T( Q/ K" k, `    </script>
8 G, Y$ f. b2 E' @) g' U1 k</body>
4 O/ T/ V+ B$ g! M2 e
5 _: P$ A6 T  V: _! X</html>
% x3 y' |! R, Z& R0 m
" I* j# ?6 ^- D  k' ~  P$ @$ C

. z9 m5 e. s! f& 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二次开发专题模块培训报名开始啦

    我知道了