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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x
* B: l' Z8 A5 J( Z0 a

- l8 f, i. \8 z/ b7 H6 n<!DOCTYPE html>
! A8 z1 ^* ?+ B/ U4 L+ p# W% K. C<html lang="en">7 f8 h2 R6 Z- v. I

. ~5 y" O0 c' @1 f" L<head>4 f& A9 W4 |4 s5 y. q
    <meta charset="UTF-8">" A, o* A& s2 Y# e( c7 X
    <title>Event Bind</title>* J* L3 y  e' Z* z, c/ b- l
    <script src="./vue.js"></script>
9 {9 S6 E  J/ X1 I5 q7 {5 U  U) Y</head>
! K$ U! p- u+ e* P% x6 s4 [5 e7 H3 z/ T' V" i# g
<body>
# ~  p$ e: J/ x& R5 j3 K    <div id="root">3 U% i8 {7 i, j! k
        First Name: <input type="text" v-model="firstName" />7 n* N9 t  U- f- W7 b
        Last Name: <input type="text" v-model="lastName" />7 R; k2 i7 E0 p. a9 {2 ^, H+ e
        <div>
+ V6 S1 M; U( w5 D            Full Name : {{fullname}}
7 k* j: A  O% k! A6 o        </div>; l$ \8 T! o8 |
        <div>" G2 s# e; f! r. a( o1 y
            <h2>{{changeTime}}</h2>! P/ f3 b( v: V# Q/ q+ A
        </div>
) s2 d* E% P$ H    </div>0 y& q1 y& }2 _% u7 f4 l+ h# z( ?
    <script>
' ?$ U, E' _& t* v+ [& |6 ~9 A" u5 S4 [        new Vue(* Z& g  ^" `, g: X* U1 w
            {
. S2 g) ~1 T6 T. u& Y3 E                el: root,+ H, U; w( |1 \, [3 j" E
                data: {5 D6 F1 H# w) z" o: F$ E5 \
                    firstName: '',8 |% e2 S/ `. @4 y9 L
                    lastName: '',
4 l) B# ?. y- {$ ^                    changeTime: 0
- c- ^( A5 s$ ^; ^3 G                },
8 G; d4 c7 I' u. R2 \9 A                methods: {: d2 \: B9 I' i% @" H5 A1 [

) E4 Q$ R0 B7 W# l. q                },
9 x7 ?0 x) O: K8 h: Q" U6 r                computed: {& q: Y2 P. y, M/ [
                    fullname: function () {: j' }# c  ]. E2 K6 d
                        return this.firstName + ' ' + this.lastName;
; S# u& D. p* g$ q; I1 C                    }
, K8 n( @* p1 `$ l" j- w                },! ~9 f1 |/ F+ Y  T% p) f
                waTCh: {  S4 l9 J3 E0 E9 q
                    fullname: function () {2 A1 @# W5 r# B4 y" l9 _
                        this.changeTime++;: w+ T' X1 Q4 }+ L6 w5 Y: w
                    }
& f0 Z4 a- S+ E. q. r4 s& t; P- ?% J' ~                }, j  d; u# h' s
            }
6 S% g! ^3 n  A  P9 [8 ]        )
/ f: i  S$ o; @+ Q$ u6 F* ^8 }, {9 a/ S% u    </script>
. a" ?$ X3 ]$ F( _3 H3 b9 I</body>3 L! d& |# f% g( R

' [8 j2 v, N" |</html>7 p# \( G9 o7 K: I  h- [: n! K6 B

# S2 L. K( ?* z' {( Q, f6 t' ^
1 h& ~% j' {. n& R3 U/ j0 Q- E0 w
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了