PLM之家PLMHome-工业软件与AI结合践行者

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

[复制链接]

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

admin 发表于 2019-8-8 17:24:11 |阅读模式

admin 楼主

2019-8-8 17:24:11

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

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

x
, q: z" {  P8 R: n
) w4 M% ?6 s, T9 O* |
3 v+ x1 p  d, H3 f! a5 I% p

* ~+ P- i4 |8 K5 \' X- P! \- S<template>
* h' R8 h% k* @) K, {7 s  <div id="App">
( i6 R7 e' Q- w2 @* Q* Q2 N    <input v-model="inputValue" />6 }$ D! V% S6 a7 K* L+ r) I& C
    <button @click="submit">Submit</button>
) e# o, R5 l& k5 b# {$ }+ ?. C6 A    <ul>+ Q4 p# x0 w: D" c) L
      <todoItem% m& i. [! u4 q6 i) G) l. M
        v-for="(item,index) in List"
; v0 q2 {3 b9 b        :key="index"
0 w5 d+ J1 _) }  z+ B' P        :content="item"
7 P  N7 b% f3 A0 g: ]        :index="index"
: f: P. s: F% z, H% c$ n        @delete="handleDelete"
3 q7 t) J9 i) z5 b$ j      ></todoItem># @6 O  M0 U1 Q7 ]
    </ul>
$ R6 w! @2 P/ [) T4 ]  </div>0 Q) f, T% o) s- Q
</template>! q' d) U% ~/ l; \  J: v% O

7 O3 g+ z6 h# D7 |: N5 p8 t5 a& Q<script>- ?4 ~' Z2 j- j. `
import todoItem from "@/components/item.vue";! j7 ]9 Y% d- d4 ^3 D2 U

' S- H: a+ d, ~7 e- M8 z; w5 X1 Aexport default {
' F2 v/ S) y2 R" V  data: function() {* }2 r) g- t& m' @) U, ^9 [0 v! Y
    return {
: p5 V& f2 ~) o$ A+ b6 w" o      List: [],2 l) K/ A1 W; _! W, h8 g3 Y: d
      inputValue: ""$ F5 ?" I; \2 \4 A1 F
    };
0 x0 ]- K) o8 W- d! e8 S7 ^0 r  },
  R5 p6 x2 s: R- S  components: {4 V- x9 }: [& ?  k  o
    todoItem
" e5 p& S. ]) K! c& v2 J+ ?; S  },2 J0 X7 t7 K0 m* a( n$ Y! W
  methods: {; Z( F& ?7 Y4 V! h7 K( J6 n% w* c
    submit: function() {
% d' [" U+ V3 o      if (this.inputValue != "") {) ]. W+ I8 G$ F$ l
        this.List.push(this.inputValue);& s/ J0 P4 o2 O1 a$ R
      }
. f& }* i7 f4 s' m  Z: \* V      this.inputValue = "";
! U4 j, R8 x3 R6 j    },
; O; e, m+ \1 v1 A    handleDelete: function(index) {# C% o$ m; _. ^. t$ Q' c# ?
      this.List.splice(index, 1);6 K* u* r" p7 {$ D+ z7 @9 i
    }9 W4 K1 {' W. e4 o: M) b, h- u: W
  }
4 S7 K% ^) I* w) Q0 D! Z% j};, |, r$ P9 x8 g; ~$ b
</script>
6 }- v$ [3 A! H. R/ [0 L3 m
# j) q+ ]+ Y  ^5 c7 x2 Y5 D1 L) w7 N

# d( ^6 e1 o. }; R0 q6 u: X- ?+ e. F5 Y

; k- X% m+ ^* _) z2 @9 B; B3 E, z) d% D5 q3 U
. ^7 B, J; S: c" ~. A
<template>
3 y. g& I3 d" e" a2 W6 m' G  <li @click="deleteItem">{{content}}</li>% B- Q- u( j. H! F
</template>7 C" }3 z5 F! ?! {9 [$ ?9 p
& a, _1 n. [3 P2 q- R  C; R$ M
<script>4 u" z; H8 m& l2 a+ x$ S
export default {
7 z) M% W$ }4 X  T1 |  props: ["content", "index"],
, S, Y# }$ Q2 ?( ^- a( L/ I  data: function() {
$ K! J) r4 I  K! E* Z! o+ Q    return {};
. x/ G! Z9 A0 {6 ^' e  },: a. c5 F9 n% r4 F& h
  methods: {+ G7 y& x7 B8 h. L8 D$ q  s4 \$ c
    deleteItem: function() {
8 u) W9 ?, A! v      this.$emit("delete", this.index);
% {- d8 J; _! |8 d) V/ W: q& r    }% N, m* ]6 }! \* P8 `9 @+ C% l4 o: ?
  }
/ q! q6 D+ `! D3 N, D8 T8 W: s) L};1 m! ^: H: C) C- Y' q. t
</script>2 M. v. H* y1 d; V' Q

. \, V, Q. ]. C7 z. ]7 a
* v0 P3 P) d6 N6 q! w0 z

" t$ i6 q1 H) t, X% Y2 i7 z
3 i4 U& i- d# |5 g+ b- f
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

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

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了