PLM之家PLMHome

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

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

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

admin 楼主

2019-8-7 18:10:37

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

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

x

% P/ _* L( T; j+ y# C7 M' K& |& c' S8 i& J1 u- U$ R
  \4 H+ `, j& R

" S) v" f7 C2 Z! c5 t<!DOCTYPE html>
0 V* l% \0 i2 ]0 c<html lang="en">
6 k) i0 g& a  E0 [0 W<head>
# I, g2 D/ p3 u; l3 D    <meta charset="UTF-8">; f0 A( Z% m* {& T9 t" i
    <title>to Do list</title>
7 L8 i9 P/ k8 V+ M    <script src="./vue.js"></script>! B* h8 Z# a7 L/ a  _1 `  U
</head>/ g8 w) a! W) B
<body>
, J- }4 V1 _+ n  j- U$ ]5 }    <div id="root">
3 U5 l# U! a7 ~. }) t8 |! |        <input type="text" v-model="inputVaule" />
  m, L& F) {( Z        <button @click="Submit">Submit</button>5 L* A9 x$ b5 h" K7 h  q' ^" `3 N
        <ul>" m! h$ I# `. S* z, K
            <todo-item v-for="(item,index) in List"
7 h3 `5 S3 m! s5 S            :key="index"
' W; ^( V% D7 L6 `            :content="item" # x' J" M7 {2 p% d  G1 C; v" R
            :index="index"7 ~3 t& H' a6 U5 H9 C" e8 ^/ p
            @delete="handleDelete"; K& \0 V2 m  c7 y
            >& c; k+ S0 c* P" ^
            </todo-item>9 {* _) g4 y" ?; r/ g, T
        </ul>
7 E' w% Q6 T  [7 k    </div>9 e: b; F* K; ?) s7 g5 F
    <script>& P9 \8 L. H9 ~6 O- L
        Vue.component('todo-item', {
4 ^; C, r7 r8 g: r- ~            props: ['content','index'],+ j7 I& l, L# C
            template: '<li @click="deleteRow">{{content}}</li>',
, h  ^8 O( x, X- l7 [            methods: {$ U" F8 c. Z7 E4 l, `- a* z
                deleteRow:function(){; W0 P' I. V* S8 l' l" E2 \
                   this.$emit('delete',this.index);
' X# }: ~0 T* j8 e                }
( q2 L# t' `: u/ b% o. o            }
; h% c% {" z5 `  _2 P4 x$ U2 o        })
! L8 P6 H3 e0 E' U! F4 |        new Vue({# }7 r2 I4 M% ]7 P% q4 X* R
            el: '#root',( Y9 g& P* ]8 O0 B$ N. U
            data: {
* T3 i3 O) p0 N# a/ W                inputVaule: '',
3 ?1 l- m% S8 f" k                List: []
3 X# `" _; Z. k5 k' y            },
1 K6 i7 H) F+ M2 h            methods: {
# S5 ^9 v$ I8 ]& C8 T, T# O$ z                Submit: function () {8 X/ p/ }' g2 R
                    if (this.inputVaule != '') {
! y; t1 D- |1 d* |! y* |* y  h                        this.List.push(this.inputVaule);
& m6 r  D) z1 L+ ^- n- f. l( V                    }
" C$ Q' m$ ]; \- z0 {8 S: G1 D                    this.inputVaule = '';$ p# A$ c9 j( Z; w4 y, h/ T
                },4 v+ a, p+ W4 g/ J9 f5 N2 O# I" i
                handleDelete: function(index) {
# A4 `9 |9 z- ?& a7 A: ^                    this.List.splice(index,1);               
: p  F! h7 R) ^6 q2 l! i                }8 J1 k& U; C8 k& ]
            }- A! k2 Q5 a* j# y+ [2 B
        })
; B6 `( y1 h' |9 r- Z    </script>
2 m! A. H  f/ ^' i</body>
+ R  [' w3 ]/ i" p) Y9 P6 Y</html>
3 p' v* c) ]: c8 ]! l( D4 w7 @8 m
' t4 j& r& G7 x, C* f+ ?. U8 R0 q
" E3 g1 f5 h6 Q7 E/ P
上海点团信息科技有限公司,承接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嘛,还是其他的什么
" c6 s# p0 r8 M; b) G另外咱们平台对代码性质的这些分享,能像一些其他的技术平台一样,把展示效果做的好一些不,这样增强可读性
上海点团信息科技有限公司,承接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, {  \8 E7 c* q. y
最近楼主一直在分享vue的开发,这块的开发是针对TC的那个AWC嘛,还是其他的什么9 i, Z! f0 g) M$ f7 {
另外咱们平台对代码性质的 ...
, x3 q, ?. ~/ `4 g" y
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
:
点击这里给我发消息
:
http://www.plmhome.com
:
原西门子NX高级教务员,10多年NX培训,开发咨询,Teamcenter培训实施等

主题2399

帖子3651

积分69631

图文推荐

  • 安装最后一步报错

    安装teamcenter12,使用网上的破解方法,但是到最

  • PLM之家NX插件V8.0.0.0发布,支持NX1847版

    PLM之家NX插件 ============================

  • tecnomatix和teamcenter如何共用一个PLMLic

    tecnomatix和teamcenter如何共用一个PLMLicenseSe

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

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

  • 关闭

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

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部