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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

0 n/ v3 F  o: X2 `/ g& Q& ]6 p
9 o. @" _& K2 B/ R<!DOCTYPE html>; H$ W' P0 o; b2 U
<html lang="en">
; {$ ~; `5 x4 [2 }8 u. b
8 g: `7 H3 m( L5 ]/ u" H<head>
3 i/ B2 L  a* o7 }    <meta charset="UTF-8">
+ O+ r1 J$ c- w& h    <title>Event Bind</title>
5 {8 K( A, w* c/ V    <script src="./vue.js"></script>7 Y/ p. B9 {, i  j8 W8 }* h6 N
</head>
+ W& B4 J0 g" t! I" x+ N) j% {3 u9 }. A5 ]/ ?
<body>
' a; `# I! q7 |/ B3 {4 i3 Q    <div id="root">: Q: |0 V% K& ]$ ]* Y; _9 @
        First Name: <input type="text" v-model="firstName" />
) O/ V: s( I$ D) E        Last Name: <input type="text" v-model="lastName" />
/ L! V7 P& q5 B% Z" f        <div>
* G' G9 a2 {' h: M( U/ h9 [( A            Full Name : {{fullname}}/ N9 B& Q; f3 E) f
        </div>5 z3 S( L9 H, g% G2 D
        <div>
0 d9 J5 ]. s4 o, {- T            <h2>{{changeTime}}</h2>$ E/ y- E3 C) a0 Z( p$ r
        </div>
7 J/ S, X, h* ^$ M1 S2 e6 u    </div>
9 @! t8 W$ G) j+ L) G( o; S    <script>
  \/ Z; A# V+ ^# P5 d7 {        new Vue(# j, P6 h' E% n# ~
            {  O: f, U; z- K+ l- k" B  B
                el: root,
" f; [! X7 o7 K, ~  R! [                data: {# y7 g3 H' B2 [/ y
                    firstName: '',
/ u0 r& ?" f. v                    lastName: '',
& {6 B8 Q, ^) c4 `                    changeTime: 0! w" _; q1 b" e& f9 a3 L8 t- F8 f  {
                },0 {* B2 q8 n# [6 d- O+ t6 V
                methods: {
) Y6 E$ i. t' L6 ]; V1 a) Z5 J1 N9 C
                },
" R+ o% }4 d1 i5 x                computed: {
+ z3 B- c5 C& Q1 h7 V! R# P                    fullname: function () {
2 [3 N+ Q& g4 r1 @8 X                        return this.firstName + ' ' + this.lastName;3 C* B8 y/ D# A/ Q: u) ]- Y
                    }/ ]1 l/ @' M8 K5 N) j. Q
                },& z  T; c* A3 v$ z4 I5 ^3 V9 Q
                waTCh: {) y) a7 k' y9 `
                    fullname: function () {6 `0 P4 `8 Y3 M% G1 n6 O
                        this.changeTime++;
! i" ]/ _. H* e                    }- Z/ I$ Z# S$ V. w
                }+ A+ B7 }7 u  V7 r
            }
1 h7 [) c9 W8 j1 q        )
/ K/ c4 Z. _+ d% B3 _; a1 W    </script>
7 Z6 i# H9 o6 w+ D</body>
# J$ K8 D/ M  [$ N/ u$ r. M+ Z& k' ^. F( U( o$ ]
</html>* m) @! b1 ]8 d3 V
% [% }6 y' x, O+ Y/ V+ ]
9 L* H$ g; {  `
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了