PLM之家精品课程培训,联系电话:18301858168 QQ: 939801026

  • NX二次开培训

    NX二次开培训

    适合初级入门或想深入了解二次开发的工程师,本培训结合ufun,NXOpen C++,大量的实例及官方内部的开发技术对于老鸟也值得借鉴!.

    NX CAM二次开发培训报名 NX二次开发基础培训报名
  • PLM之家Catia CAA二次开发培训

    Catia二次开发培训

    Catia二次开发的市场大,这方面开发人才少,难度大。所以只要你掌握了开发,那么潜力巨大,随着时间的积累,你必将有所用武之地!

  • PLM之Teamcenter最佳学习方案

    Teamcenter培训

    用户应用基础培训,管理员基础培训,管理员高级培训,二次开发培训应有尽有,只要你感兴趣肯学习,专业多年经验大师级打造!

  • PLM之Tecnomatix制造领域培训

    Tecnomatix培训

    想了解制造领域数字化吗?想了解工厂,生产线设计吗?数字化双胞胎,工业4.0吗?我们的课程虚位以待!

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

[前端框架] Vue js实例,简单的ToDoList 实现

  [复制链接]

2019-9-1 18:31:50 1925 2

admin 发表于 2019-8-7 18:10:37 |阅读模式

admin 楼主

2019-8-7 18:10:37

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

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

x

7 J4 T6 }$ {4 `! ^6 c' O: U# t, n0 _3 }5 w+ Q* _
0 B2 U5 z* e/ x3 }

: S- i5 B' y1 l1 |2 L7 n$ F<!DOCTYPE html>: S( A8 G' ]$ v
<html lang="en">
& J: v8 ]* B' a: u! f<head>- n9 _" V4 {. _9 n& Z
    <meta charset="UTF-8">
* M) x% F3 s. s6 }# i5 Z( H/ x% a    <title>to Do list</title>
' F/ j. N. h3 j# X+ g; B    <script src="./vue.js"></script>
& t( ?. ?" T* c</head>" y& i9 d. b. M
<body>
! f3 E" u1 p2 M4 @( M2 h, ]2 w    <div id="root">  m% t# k; g& A* D* G" Z! E% J3 Z
        <input type="text" v-model="inputVaule" />
! g$ F6 t- Z0 D1 N3 x: Q7 \$ g        <button @click="Submit">Submit</button>: W. l% D2 F, q1 v4 T; J9 e; k
        <ul>
7 @. T1 C4 R7 u            <todo-item v-for="(item,index) in List"
3 v8 {( j, ~5 c$ @( x1 [1 r8 I1 R% e- w            :key="index" * W) x0 w0 y2 Q. V/ b* Q
            :content="item"
  ~5 l; V7 |) L5 C9 ^. T            :index="index"" q. G! s2 N0 D8 g5 _. I9 g- m
            @delete="handleDelete"4 I5 O5 t3 R3 v8 e$ R
            >
6 Q5 {7 [9 y6 E5 }3 V            </todo-item># D/ n. q3 l, x1 ~4 l9 y
        </ul>' V: v! C' K. G7 u
    </div>! A9 ~% f4 Z/ z8 B9 t- ~
    <script>8 I% x4 |% Q$ D. o2 q6 e, D
        Vue.component('todo-item', {
0 N# t0 a9 t* O4 N            props: ['content','index'],
. T" ^% N6 T( w3 z" J9 a            template: '<li @click="deleteRow">{{content}}</li>',
: w1 i% m, Y9 X" @- O" [9 C- Q            methods: {
0 L; H' C" Q+ b% k0 Z- t  @                deleteRow:function(){
5 K  t- j. q" \3 I! Z. K                   this.$emit('delete',this.index);
2 G2 c' p: r* R# K8 X                }
1 V  J5 z  n6 y: Z6 E            }& R* H; t3 _4 y3 }5 U, r1 z
        })
  N: {% K4 l( J1 e4 X        new Vue({. r: S8 I  c5 E" |
            el: '#root',  R4 W* v) z$ h4 w+ t: N$ Q+ s
            data: {
! I4 s- p7 S5 _# r; X' C( ^) N7 E                inputVaule: '',: J+ D7 F- N3 Q+ ~
                List: []% e" b4 ~) U2 V$ A6 R( W; c9 W
            },: U5 U  u# i' b$ [2 ]  S
            methods: {; f, T2 I. M# ^) k& U& _" u
                Submit: function () {) L; }# m2 v; i4 n# A. |
                    if (this.inputVaule != '') {0 ]$ O9 G- X( U
                        this.List.push(this.inputVaule);
2 J; ~' _* i9 r8 V# @) k                    }
" n6 L) ]4 Q0 U( G7 J, g                    this.inputVaule = '';
6 m$ B6 N9 e4 A                },
6 @- \+ y* m) A6 b; B- ~                handleDelete: function(index) {
8 w' a6 i" W1 I$ F8 u- J0 N3 ~                    this.List.splice(index,1);               
. k0 o7 L+ z% \; x                }, l4 z" c/ P8 b0 u. ^, m' J
            }3 ^( h0 {- f* K( D8 M' d
        }). X; N0 C& a$ b  E+ n% _  R+ S8 G& P
    </script>1 P4 L$ C; [! c$ \0 }8 `
</body>' m( a% b1 ~! s) I
</html>
" ]& v9 S) t, z7 |8 w, Y( ?

8 D) C7 j) M7 u" Q+ C7 U) Z% c, ~( t6 q5 C  A+ o
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

全部回复2

Frank 发表于 2019-8-10 09:22:12

Frank 沙发

2019-8-10 09:22:12

最近楼主一直在分享vue的开发,这块的开发是针对TC的那个AWC嘛,还是其他的什么* w' e9 N' x- s! L5 k0 A* H
另外咱们平台对代码性质的这些分享,能像一些其他的技术平台一样,把展示效果做的好一些不,这样增强可读性
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

admin 发表于 2019-9-1 18:31:50

admin 板凳

2019-9-1 18:31:50

Frank 发表于 2019-8-10 09:22
# w% i0 e0 K# Y最近楼主一直在分享vue的开发,这块的开发是针对TC的那个AWC嘛,还是其他的什么/ S) ~" G  ]6 t/ U
另外咱们平台对代码性质的 ...

6 C( Z! L* I/ x9 \1 t  `web 开发前端框架,以后着重于互联网方面了
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了