PLM之家PLMHome

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

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

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

admin 楼主

2019-8-7 18:10:37

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

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

x

& g1 Z/ P: @( ^8 N5 C1 X. y$ ?; j# u2 u
1 [5 c. o. {, A0 z, }

" D' Z: \# C3 F1 ?<!DOCTYPE html>" y& @3 P8 w% n1 z
<html lang="en">
0 E! m" p/ f$ O5 `, s9 I: Z<head>) E6 o. O" L) C$ [9 W
    <meta charset="UTF-8">
+ z! n9 s6 W) m8 V; ~. a! s. N    <title>to Do list</title>
" ]. _3 P4 k0 ~# y" c    <script src="./vue.js"></script>
8 y9 s6 X$ U; m. ]* Z</head>) s) C, z' `; s" R6 Y
<body>
/ S  a' @) u' p5 x3 e* p    <div id="root">
% V# A* \. I9 w; ]; M        <input type="text" v-model="inputVaule" />; h. Y6 T% k3 z) i/ ]
        <button @click="Submit">Submit</button>
* k# H. j+ c( v. ~        <ul>+ b# W) I( n! z5 {- K. n
            <todo-item v-for="(item,index) in List"
; m: ]$ I3 _6 S+ I; P            :key="index"
, E: X: M% b. h- G# M/ Y& L, P) ?            :content="item" 4 U' g. y+ e4 }  d( ^
            :index="index"1 [* f; |& W/ ^1 w& A- S
            @delete="handleDelete"4 i6 O2 Y2 q! o3 b9 Y
            ># t- }8 [4 Y4 h6 M3 A; f
            </todo-item>
3 d. x( Y- x  S8 x        </ul>
- \4 y; O" j% g  L9 J: m* b/ Z    </div>* @9 e, e! F0 E6 [2 [. J6 `. ?
    <script>
* J/ h8 M! [7 s' ^; s, v; l4 k        Vue.component('todo-item', {
0 R0 X9 M# b& C: J            props: ['content','index'],
% ?: z1 J# M9 {/ U8 b            template: '<li @click="deleteRow">{{content}}</li>',7 R$ {3 [1 q! w- I) _& V- y% h5 P
            methods: {0 B( o% `* k& {. ?2 w8 ^; ^$ D  ?
                deleteRow:function(){
8 B* \& A% g7 G. i6 G( z                   this.$emit('delete',this.index);( ]3 k7 T8 |  T/ g: w
                }  G6 k# K. M4 X+ a9 ^9 V' B
            }% H' ]3 g( _. @6 ~3 G7 @5 {- o& }
        })
% |" b0 _! r) H3 d; F5 k' ]+ N        new Vue({
/ I5 ?* O7 T5 O/ w            el: '#root',3 A  K9 u# T& O4 h  G
            data: {, P2 B6 v' N) A) U( m' ^2 d$ B2 |
                inputVaule: '',; q5 c, k) j5 W. e; ?7 i, o
                List: []
2 p, T) }0 n  _7 X2 F$ X  n            },
. f: g* n8 o* T8 S1 I3 B            methods: {; P$ p0 s: l, U
                Submit: function () {3 _7 V7 X* T+ b; R
                    if (this.inputVaule != '') {
: c; d% u3 i* {) w                        this.List.push(this.inputVaule);
3 }+ P' p; N/ K4 L, A0 L                    }
0 u) m: L: \: b& q. z, z                    this.inputVaule = '';
; s, [& h9 g/ B4 |# z                },
' Y! j7 A' z7 r( {                handleDelete: function(index) {
9 `. V) P$ G0 b3 ^  K: p5 W2 m                    this.List.splice(index,1);               ! }) O6 n4 N& Q9 b" N
                }
9 Q( v7 O! m* C2 ^. x            }
1 Y  _  o+ x2 M9 M7 ?3 l* c        })$ S! K" c; S7 P" _' e/ X6 @0 D
    </script>
( k4 k: M' v5 l( n, v2 d</body>
8 P: R4 }" q: C</html>
) T( z2 ^+ g. n% {& u: b
( j5 C8 {4 h/ X4 p3 r$ X! @+ t# `% ~& E
. g0 m* p: {' R1 Z" H
上海点团信息科技有限公司,承接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嘛,还是其他的什么( }% ~5 @5 R% B
另外咱们平台对代码性质的这些分享,能像一些其他的技术平台一样,把展示效果做的好一些不,这样增强可读性
上海点团信息科技有限公司,承接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:222 {) T* U9 C$ I- [
最近楼主一直在分享vue的开发,这块的开发是针对TC的那个AWC嘛,还是其他的什么
, H2 `- X$ G! ?另外咱们平台对代码性质的 ...

# i5 Z+ g; d2 [2 Bweb 开发前端框架,以后着重于互联网方面了
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

发表回复

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

返回列表 本版积分规则

:
管理员
:
xduniverse@qq.com
:
点击这里给我发消息
:
http://www.plmhome.com
:
原西门子NX高级教务员,10多年NX培训,开发咨询,Teamcenter培训实施等

主题2391

帖子3639

积分68413

图文推荐

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

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

  • Tecnomatix 二次开发入门教程 4 设置图标

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

  • Tecnomatix 二次开发入门教程 3 第一个hell

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

  • Tecnomatix 二次开发入门教程 6 实现打开PL

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

  • 制图的属性同步时出现错误提示

    您好版主,近期更新了软件版本后属性同步出现一个

  • 关闭

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

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    PLM之家经典培训教程--强烈推荐

    PLM之家(plmhome.com)提供专业的实施开发培训

    NX二次开发基础培训 | 已 80 学员 参加

    CAA二次开发 | 值的一试

    Teamcenter用户基础入门 | 虚拟机赠送

    限时优惠,原价3000,现价888

    UG 二次开发CAM加工开发培训火热报名

    哥已知晓