PLM之家PLMHome

[前端框架] 组件方式开发todolist

2019-8-8 17:24:11 288 0

[复制链接]
admin 发表于 2019-8-8 17:24:11 |阅读模式

admin 楼主

2019-8-8 17:24:11

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

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

x

, Z0 q+ [# |% G  |/ \8 K7 N' r9 l- y* e4 H! a2 U
; k/ X0 |3 W+ N+ u- A1 B; G) A
0 @5 K1 w9 Q/ x: m
<template>
; t- i7 b* \. K) U+ r3 H1 C% H8 _  <div id="App">
: y3 n" w1 h/ ~# R$ z- _+ \    <input v-model="inputValue" />4 A1 K* ^( @) F( M
    <button @click="submit">Submit</button>
7 M9 F' I9 ?% x0 ~, ^    <ul>( B) L$ _2 k* l$ @7 `+ j0 D
      <todoItem
. z5 V' T. ]4 @        v-for="(item,index) in List"
, D, Y4 j, D- d, R        :key="index") @" M! ~0 z- _* r6 r/ g
        :content="item"
  x9 c; S7 c" U5 y9 p! B- D+ W1 k8 }        :index="index"; T2 {. R9 U7 K: |2 Q
        @delete="handleDelete"3 H! Z' o$ |# f* U7 B
      ></todoItem>2 G, c( s. Q& n* F3 r1 k% g
    </ul>
& B0 A4 b8 j  H4 Y  </div>
! R# ^/ E- h/ i& p1 C</template>
; z- W1 R8 G9 s4 @; U- T0 S
, D  T6 [3 o! _$ k2 i* g<script>$ F# f5 H1 v- q4 `, h
import todoItem from "@/components/item.vue";- ?6 s+ O9 ~7 O1 d+ F# q

/ d- F+ p1 K/ N: l/ Vexport default {
9 Z; G8 W# ?1 [4 ~  data: function() {' ^/ G$ n! s4 M8 Y/ J
    return {
/ h1 i9 Q8 M2 f% ?, }4 v! J      List: [],8 C0 [& N+ x8 o: ^/ Q0 x2 S  ?
      inputValue: ""# c/ a* Q7 p+ n8 Q
    };
$ ~+ ~( ?4 ]' f9 c  },
' N+ T' z. e9 s1 g9 G. {" x* q+ f( f  components: {
3 t4 C$ M2 ~; y% s    todoItem! j5 S# X2 R5 \' ]
  },1 l/ t" e2 a/ G3 S* X0 t: ~
  methods: {
  n2 ~, r. [  T- K    submit: function() {
: j, \6 [8 v+ @) V8 E      if (this.inputValue != "") {8 N, }, @1 Z% o9 Y) I
        this.List.push(this.inputValue);& M6 Z2 S8 `' u: S9 Q
      }
/ z/ R+ e4 n5 m- I4 X/ f3 q      this.inputValue = "";6 C% Z3 l5 R: }5 z$ r7 x& d. F+ r
    },! ]+ E6 @- x. M3 T7 j/ W$ }/ |/ p
    handleDelete: function(index) {
- s/ H6 }5 r* W, c* j      this.List.splice(index, 1);2 f: r9 N3 U6 P5 v$ N
    }
& V0 l- F8 t( \3 @) c2 a  }/ I) X0 Z* m( k% A, H  v; t: `
};9 w6 \0 o5 |* w
</script>
  h" K' q* s' [2 _+ }/ ]/ F6 N: S

2 s; B8 |5 S1 z+ f& _

0 \# v  f3 `* v$ h! h, a) V3 S
; d* x, }9 ]7 R" N# ~3 p/ b
7 ]6 s; K2 c) U6 i- j/ k
" E# w6 X* g; G7 D, G2 Q, }9 o8 U0 }! R$ |: K
<template>
- o  n% \4 i! M* [  <li @click="deleteItem">{{content}}</li>
$ |' [1 f; ~& ~( R# A* r- P) Z</template>1 D, s: O" z2 U$ O5 @
( ?0 A9 A) q$ T
<script>
1 J& d' z5 q( D- {' f3 V; A6 \3 N8 nexport default {9 f: @& q3 q' m) X9 k6 X
  props: ["content", "index"],; s. j5 }7 r2 J
  data: function() {  J/ d: T  R! f) g
    return {};0 B# B: `, U# }) N
  },+ g9 K, ?6 C7 d! f  _/ K& Q
  methods: {2 B7 X8 h: B/ a7 q! |/ h8 l
    deleteItem: function() {: G3 a/ @8 ], b0 t5 j
      this.$emit("delete", this.index);
. l4 C& _, K' X, y    }) G% c1 w1 b) d1 u
  }
$ B7 r" w1 Y8 @};
* B( ?8 [; P" M</script>' r- N0 o+ w6 n! r

/ m& K& R& s6 q: ]& }% \+ X  L2 N- \7 W% \/ Y6 `; x

- F; y1 ]  n' s- E

' c0 c; `3 }/ @. f4 G, _
上海点团信息科技有限公司,承接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

积分68390

图文推荐

  • 官方文档,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加工开发培训火热报名

    哥已知晓