PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

# Q/ g" D' M7 o& V( q% o. c" _5 ?7 v0 F8 i5 ^, P" l
<!DOCTYPE html>
; N& U4 @$ T2 {9 V% C3 _<html lang="en"># x: C! m8 `+ X3 m7 p6 A
/ F9 Z% r! L( [5 E1 w( f% K
<head>4 z: [  A9 Z* z6 A# p4 i+ e7 J/ ~
    <meta charset="UTF-8">
+ C9 o/ ~5 e  t7 G$ O    <title>Event Bind</title>* ?9 ~) U$ f! t; n9 i
    <script src="./vue.js"></script>
: q) J/ X5 ^/ M% ^2 J" b- K</head>) F1 o: h7 N* A& }7 t& q1 X$ O

$ c( q; F6 Z! f  q7 Z' n<body>1 F# Z8 H' }9 d; T0 o/ @' J( [
    <div id="root">
# N8 G( }/ V$ k6 m0 A7 W        First Name: <input type="text" v-model="firstName" />
, E+ I+ J/ e. z9 j( R# k  _        Last Name: <input type="text" v-model="lastName" />+ x* J6 p. g2 E2 V# s+ ?" c3 W
        <div>6 k' N, e9 W1 {& t; G0 w
            Full Name : {{fullname}}" ^) {! Q. L  O2 p/ f) G2 |  {
        </div>
: l4 s9 s1 c. v$ G3 V        <div>
5 S! z1 s8 Y' r3 _+ O4 ~( e7 a            <h2>{{changeTime}}</h2>
' \# U3 H3 M! Q- V# R        </div>
* x! M% m; ^- X: }4 J    </div>
: S. o6 n3 W1 Y6 \' _    <script># w$ a! r! E; i7 h: [4 i8 C- M5 y
        new Vue(( l/ K2 Y2 R  F* o8 [
            {
; l7 G: u* o; S6 Y                el: root,
+ A9 m( p6 f7 g  n3 w# N# w                data: {* s4 @; v1 s$ D) {- M. n% y" E
                    firstName: '',
4 o9 Y& L! ]1 K- x) k                    lastName: '',
7 n" l9 {; m& z/ e& U( ]* T                    changeTime: 0+ G+ n% Y; b& V5 o- n
                },1 U9 y5 p/ Z, c! M- l
                methods: {
, D# E4 d- C6 x- r$ p" I$ g; G
" n; q* Y( a& r  k                },
  a6 s8 ^* S0 V! V1 X9 H                computed: {$ L' R  d8 b5 D6 g3 |$ l2 M
                    fullname: function () {6 O7 q5 y% e6 Y0 n
                        return this.firstName + ' ' + this.lastName;3 |1 ~1 |2 B0 c/ ?! f8 G4 q( a
                    }1 I! F& m, M7 I0 y* _
                },
, b* E1 n5 y( K* f                waTCh: {. V* s) y7 d8 H; E0 t9 t
                    fullname: function () {! H4 A* F& b7 j( _. @! m& |
                        this.changeTime++;
% H! f& j0 [. _+ ~( o                    }7 a& R4 C, c& d" X$ e2 {) O& h
                }
+ E, V/ `' j* c& b6 C            }
, g0 [5 M  N/ m) B' f        )
7 C. t4 w4 d: K" h, l    </script>6 F# s2 u, R9 ~1 @, T3 O
</body>
" k. r$ n1 ~( [2 d+ v7 H' K) I" `( G: E( F/ m
</html>; e6 L1 B2 ~: O! }( u4 U  I0 |

! V  L- f8 [# F3 m$ U" E/ q
" `+ {# O" e2 c+ v+ B0 ]
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了