PLM之家PLMHome

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

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

  [复制链接]
admin 发表于 2019-8-7 18:10:37 |阅读模式

admin 楼主

2019-8-7 18:10:37

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

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

x

4 V& {# r- M8 D' w& m
3 u9 l. w6 q' b9 t; M& K+ ]4 `1 a+ x6 u

. F/ X3 f. N0 r" h# m<!DOCTYPE html>
7 @$ A* R# e$ Y& X( O1 b/ U, o<html lang="en">0 G' d. a' W- v, U4 X6 Q" G
<head>
' t* A- |$ V6 F, c9 G    <meta charset="UTF-8">
$ e7 x7 n2 Y$ L0 `5 m- ?6 Q# ^' q    <title>to Do list</title>1 D' R4 d8 C5 {* H/ [; {
    <script src="./vue.js"></script>" x, r/ j- X+ [2 T" H9 P8 Z
</head>
* K" i! b4 C+ @! ^1 x<body>
$ O+ z3 [+ E- k# T    <div id="root">6 a: Z# |+ P2 ?  |( A
        <input type="text" v-model="inputVaule" />
3 H. s# i8 M" Z        <button @click="Submit">Submit</button>
7 b2 S+ @- a; _% b5 c        <ul>( z& g3 A5 n2 N& i+ t
            <todo-item v-for="(item,index) in List" : \" G  |! Z3 M1 w' H
            :key="index"
2 O$ @8 ]0 P6 c2 j% J            :content="item"   T1 P6 k2 B' O7 S& ~- t
            :index="index"* [# i9 t, K1 w; F
            @delete="handleDelete"$ B0 R* j# c1 s0 F
            >
6 |- R) C- p, K            </todo-item>' t# t* y) x, }& Q7 U( E) p, {7 ~
        </ul>
  J  Q  V$ }8 W; O8 j1 Z  U6 g0 c    </div>
" c7 Y3 ^# C4 e. ]& X9 @: Q. J, x0 H    <script>
( t0 s3 n/ ]+ x$ n7 m        Vue.component('todo-item', {3 C% z- g6 i" `5 [  G8 `( M. h; B
            props: ['content','index'],1 o" O: {  j, i/ d1 ?
            template: '<li @click="deleteRow">{{content}}</li>',
5 x- Z! d$ L- y            methods: {
* }" @# K  p6 [! O4 ^1 P( S: h                deleteRow:function(){
& g. e. ]7 |0 U+ i* [, P                   this.$emit('delete',this.index);& ^% P7 T4 o1 H' s- }! [7 g
                }
1 B0 v% l  k. i' G9 ~0 f  w            }/ ]$ \5 i" E* Y- T) ?4 l
        })
+ Z6 B2 P; J- Z2 T        new Vue({3 i+ \$ @  j" y4 A
            el: '#root',
3 q, W6 I$ m( ~8 n            data: {
/ @* s3 y, s2 a8 X8 e                inputVaule: '',1 x) R+ ]/ n/ u
                List: []' b' a8 e0 B1 f5 w
            },; n$ U0 z6 G2 j8 V4 A% N
            methods: {
/ F" f0 u; k8 L4 Y4 c$ s) E" G4 f  O                Submit: function () {
  f5 B* P5 m- o# d& N- S                    if (this.inputVaule != '') {
5 y5 g: F# `3 |" u" G1 w; H/ Z$ a, S                        this.List.push(this.inputVaule);
8 e4 e9 n  @" ]/ q                    }
: s( T7 {9 u2 X, B  r& r                    this.inputVaule = '';! I; B' ], x. @! Z5 P8 x
                },( m8 O/ @* W2 e$ e
                handleDelete: function(index) {
1 K- v( W+ U; j: C                    this.List.splice(index,1);               3 h9 b+ I. m* H6 s  `
                }
+ {3 F. N2 k+ R& h* U            }
3 [2 m8 `: ~7 Q! M1 `+ d        })/ u8 h- w/ O' `6 \3 S
    </script>
2 m+ l4 z$ L& @, X. a. B  g& z</body>' g4 \. f0 S/ q+ M/ P
</html>1 o% ?2 Y5 E; X! `
/ Q7 c+ C4 Q# [1 K- t

" N& p. h& ], R: i/ R$ D
上海点团信息科技有限公司,承接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嘛,还是其他的什么4 B( Y4 D9 a/ V4 b( U5 \
另外咱们平台对代码性质的这些分享,能像一些其他的技术平台一样,把展示效果做的好一些不,这样增强可读性
上海点团信息科技有限公司,承接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
- G' m$ |2 X; M# i6 s9 _# Y最近楼主一直在分享vue的开发,这块的开发是针对TC的那个AWC嘛,还是其他的什么9 Y7 E( S- y; y. y  k4 |
另外咱们平台对代码性质的 ...
0 T, p! m6 n7 d, ^
web 开发前端框架,以后着重于互联网方面了
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

发表回复

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

返回列表 本版积分规则

用户组 : 管理员
邮   箱 :xduniverse@qq.com
手   机 :VIP用户可查看[申请]
Q   Q : 点击这里给我发消息
性别 : 就不告诉你
主页 :http://www.plmhome.com
个人介绍 :原西门子NX高级教务员,10多年NX培训,开发咨询,Teamcenter培训实施等

主题2237

帖子3470

积分65899

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 6 实现打开PLM之家

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 5 创建Tecnomatix

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 4 设置图标效果如

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 3 第一个hello plm

  • 官方文档,NX12 使用

    官方文档,NX12 使用 Python进行二次开发相关配

  • 关闭

    站长推荐上一条 /1 下一条

  • 发布新帖
  • 在线客服1
  • 在线客服2
  • 微信
  • 客户端
  • 返回顶部