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

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

[复制链接]

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

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

admin 楼主

2019-8-7 09:29:47

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

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

x

3 U1 U* T6 r. o- v# k# o+ X# Y/ A, g! [1 X  @: G
<!DOCTYPE html>' o3 ?4 {- p6 l# s) W$ W
<html lang="en">
3 V1 J# m8 e& N: C; U" W# `: T9 ~  }5 u. |0 R: @( @
<head>
+ F8 I* O8 t# u# S    <meta charset="UTF-8">
  |# I. F* b) @    <title>Event Bind</title>) G- w1 M) T' O  a) h
    <script src="./vue.js"></script>. ]& T. B. p' ]- c2 x" m" [
</head>
1 l+ d7 y9 U7 @$ k3 H) y9 z4 M- _9 s) f" e
<body>
# ~8 q; m2 }5 {# U$ I& B, W    <div id="root">/ s% r9 \3 R, Y) K7 q" L9 g/ S
        First Name: <input type="text" v-model="firstName" />
" n0 f- y( N3 o1 Q7 S& B7 @$ E% {$ g        Last Name: <input type="text" v-model="lastName" />! d+ g) q, [% _1 z6 q1 q4 k
        <div>
. K& {0 F9 |' W2 c; Z            Full Name : {{fullname}}* Z: W6 L$ M% s3 o% {
        </div>
- S! j. I* w3 i% r        <div>7 k! E- i9 y* T+ d9 a' @5 F
            <h2>{{changeTime}}</h2>) |) ^0 a" {# C3 q- b
        </div>' a3 e! D5 X+ t' o
    </div>: a' _6 F" D- O. \7 A0 H$ O+ |
    <script>7 z+ q0 Y  @" s2 r
        new Vue(
- N2 Q! s4 q/ i# M# G3 k5 H            {
/ h! W1 e; i/ E                el: root,
/ I, j, G& s/ [6 B( }                data: {
0 d1 L3 e) j3 M1 N: `6 |5 E7 Z4 x                    firstName: '',
# f8 M! D' N( ]7 G                    lastName: '',  c  ^6 |4 l# F- `+ I( _
                    changeTime: 0" N4 n$ X2 o3 N2 I; A$ M
                },9 O9 j5 r* P2 l1 e) h% q
                methods: {, I2 q7 K2 k# x; b! \
4 u8 E& V1 [  V1 A2 ?
                },+ d# Y# u7 C1 n0 r$ x, [! T# ]
                computed: {
3 k0 g  Z5 ~) P( p0 Q                    fullname: function () {
: b& j. H8 U6 x6 \                        return this.firstName + ' ' + this.lastName;
; w) P& _8 @, s7 _$ P9 s                    }
9 C' l5 D( }7 ~% s2 m7 z7 ^0 d                },# P& T9 w% N/ h' U0 M% @% [
                waTCh: {8 x8 Q2 N6 u7 Z5 ?5 q
                    fullname: function () {
# j8 m/ `$ j4 f* g! ~. B                        this.changeTime++;
/ r- y( m- e+ G/ p9 \                    }
& e, m4 {. K5 {# O0 K                }% |5 ^) A- ^4 K) }7 e
            }
! ^1 i2 k9 ~1 c6 `5 r        ); c7 ^" C/ _" Y( i& @9 x) ~
    </script># z9 H- J1 I8 a3 A# c8 [
</body>; d# b  F6 G, `8 ?: [. o$ e

3 f2 ]: i8 o" Q/ C" Z7 B' ~</html>
% i# K, n( a, d( v# e7 E

/ [) x4 t$ k7 o: K  c
6 Z: ^/ x: ]# i8 r( Y
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了