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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
/ I9 f% Y6 P- [+ v3 I2 J" D' ^& ]
( q9 |% V7 D- M6 ^* K
, o1 I" O9 ^6 t+ x
3 k% S. z! \- u; v" s
<template>% r) c0 @8 T0 ?5 c
  <div id="App">- w$ t# p( P9 ?( D
    <input v-model="inputValue" />. u6 v/ J) q) M) [- z" N6 d) Z
    <button @click="submit">Submit</button>; r+ ?; P. m  ?" r, u- @
    <ul>9 m; n9 L+ d& G, m
      <todoItem
. t4 O) M$ ~1 y" F        v-for="(item,index) in List"
+ y' a8 I' e$ G8 S' l  X7 f        :key="index"
3 D& e0 e, ]8 r        :content="item"
& r& S! R2 m$ j( H        :index="index"& y- |! W$ {+ [" p8 w2 r8 D
        @delete="handleDelete"
5 C- K7 n: M) d$ e      ></todoItem>
+ b# |4 K( G3 N. w    </ul>
% n# ~9 K- o8 j" C/ [( C7 _0 l2 G  </div># d/ g) c; e0 v& a4 ]
</template>( N7 J/ v$ `! i
* V. d# Y: }" ^" L: ?
<script>
8 Y* `4 p4 G0 w! d9 l& Z. ^& B5 v3 Ximport todoItem from "@/components/item.vue";
. ], m) ?6 N1 l* [0 R- Z% B* ]6 `2 P& r  Y2 o
export default {
$ T( ]* l0 m; ]0 E9 [  y6 A" a  data: function() {
/ _2 h7 d/ E" w: d  f6 ?0 ~    return {. @  E, o' r9 x* _/ z
      List: [],+ z5 l& r  t% t4 f4 E* f4 N
      inputValue: "", d$ M& }" g$ S
    };9 d1 {5 P. D2 t) R
  },  A) S* G: `* g. q2 u
  components: {" `' Z9 I! h0 n7 \# W1 R. Y
    todoItem( h' J1 P  O! k6 [* O0 ?
  },3 z, r. I) k7 w# I" X
  methods: {' r* W/ P  U; C5 r& N& G
    submit: function() {
' o! X) |3 L: J. s      if (this.inputValue != "") {% c+ J* r6 h; ~+ i' c6 A
        this.List.push(this.inputValue);2 f- x; e$ w* v) X) S- l. j$ v
      }
  `/ r0 E' y# z+ Y7 V# g- @# i      this.inputValue = "";/ J: N2 U/ r' G/ Z5 J* r
    },
, B6 ?' r5 W" R$ d& t0 J    handleDelete: function(index) {
. K, I  ~1 b+ ~  O1 }      this.List.splice(index, 1);
0 c0 f1 L1 ^5 J* m5 l7 I    }5 b0 j; P' `) r, \; ?
  }
5 u. W& N+ Z( B9 u3 _0 G) D};% e/ V& [1 T, ?& B* \, P
</script>9 d: R0 j: t) W% x7 o' [

  y- m! y6 |6 L% `# T' O+ H
3 F. v4 K/ ~; P) \% r; @
/ U5 R3 W/ P' J# ]8 A0 f

6 n% y0 Q: A/ }  b: \9 Z+ G5 M- D# b- T7 y; t

8 u3 S9 s$ Y, Q' {) t! W8 \
% }7 V5 @8 u/ h/ K2 I: }! E<template>3 u9 L1 ]3 S/ n6 h( K
  <li @click="deleteItem">{{content}}</li>: Y, @/ o$ L. ?' h% F! q8 h
</template>
& B- S) u" o0 T/ T/ _5 l
# d; |6 T  x9 [2 X# X, r) V6 z" k8 o<script>
6 M8 ?& O7 \' Y+ r$ ?) `3 Jexport default {2 V/ G& |: C- i9 R
  props: ["content", "index"],
, d; q7 P. v% h2 P  h/ d: {8 w  data: function() {  `. D' X: g) J- n, s2 }
    return {};
! M+ J' |5 ~$ |( z  },) C5 p0 G' U4 J# _) D& v9 g
  methods: {
+ F: V0 [8 ~& N4 s4 z% R2 L    deleteItem: function() {
0 H! `7 Y; U2 A% @  v" q      this.$emit("delete", this.index);2 o3 S1 L0 C3 _9 [
    }
2 x$ [& x( e! c  }
4 U9 m7 D/ V% U: H8 k% L- _};
2 z1 Q# a' r% a2 U& H</script>1 t9 }! a7 }! X  ?

" R" b7 o: t1 v
! {: N1 V4 T$ l/ s' [$ B0 |4 \
; L3 ^2 i( \+ {
- h* t$ T+ p- z+ [+ y
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了