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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
8 l8 G+ v8 W8 p' a6 p* |
$ b6 m# B+ G" _) f, a

% z5 B+ j! Z$ x, \- J) E
9 }9 y' h, d, C- e9 M5 b  Y! a<template>. e2 U4 U! q1 \8 p3 ~  c
  <div id="App">. s, p( R) @) B9 W0 q4 s. f3 \% S( O
    <input v-model="inputValue" />
5 h- S% j% f7 x( ^& Y! |7 o    <button @click="submit">Submit</button>
4 }3 S8 q4 \2 `3 s3 I0 ?1 b! \' s    <ul>
+ F$ _$ u( h+ r8 @      <todoItem) ]: e- p$ y2 h  i
        v-for="(item,index) in List"1 E3 t! ?' i$ d9 }, j
        :key="index"
* k/ T7 _5 F. v$ N: R: a        :content="item"7 T8 p) P) h+ {; v8 D! i6 f8 w9 W& r
        :index="index"
; s/ F* o! `' N  ^3 ~# ?/ m        @delete="handleDelete"
. t$ C- S7 z, W      ></todoItem>9 {- a1 T  t. ?% Z! U( D
    </ul>
4 C0 U1 x" z& Q$ {6 L9 Z  </div>8 h! T" |( f  J6 n% R
</template>
5 F/ i8 p; ?' {7 ^8 b# U8 }
0 q+ S  G: j3 A0 a0 M, u: G6 [( b<script>
# D. I# j$ A5 |8 w; z' f7 Pimport todoItem from "@/components/item.vue";; m& x# E- h, w' ?

( a* x0 {) K) v  w% Aexport default {
/ S( q' s: r6 |  data: function() {4 V( A. @1 G# o4 Z  y; d0 _2 I* D$ \
    return {& h/ ~& B3 \" q$ h
      List: [],# N7 G3 H5 F2 \  D& c& x3 C" w
      inputValue: "": x8 j1 e- V+ q; b1 I  X  z
    };
9 ^: w5 x# A8 c$ A; y3 d; t  },
) {: E/ z  K6 q, t# m3 `! U  components: {* g/ i( K5 t6 Q& C
    todoItem
* O7 g, K8 l3 z- q2 \' I$ R  },
, j" V* f; `0 a% S! Q6 U  methods: {; p2 ~! d; K1 d8 X" Z
    submit: function() {! R  T  U( }- ]  R: z* _
      if (this.inputValue != "") {8 P6 y9 }* I/ K* q0 D) }0 m# B, o
        this.List.push(this.inputValue);4 ?. i; S/ W- R+ T5 j
      }2 ^& ~' a" S  D1 }9 ^) |9 V
      this.inputValue = "";; T' o, P2 T- e+ J) M* A/ B
    },
- m5 c/ I' Q  _0 {( P8 b8 j: m    handleDelete: function(index) {* w3 O5 t! v4 a/ d  K! {0 n: C) G
      this.List.splice(index, 1);
* e! b3 M/ o! D+ q+ i    }. D9 y1 q/ v. `  q7 r) a+ G
  }
( t9 ~" E3 x. K1 A/ j) q! X};, k1 ]8 Z% L  R  \
</script>
; |; Z5 a3 R6 R( [) _4 c9 m9 ~8 A. k  N5 a
" z9 n: A( S$ H# s

1 y2 l3 {2 k$ P  n+ Q8 \& N; h. f' V
1 C( W. p% U) `8 k+ L' `
; \9 B" F- _2 m( a8 D; s7 |5 J* k/ q4 _8 P4 r# u
) ?  t  O5 j9 g( }3 k5 w/ W
<template>) B- q( Y+ A/ Q! U; c6 U
  <li @click="deleteItem">{{content}}</li>
1 |  }1 L1 Y# S! P$ [</template>
4 A, }  ^' @5 p& L( s) i8 ?
% O  ^' O# K: s4 v/ T<script>$ q1 o5 U/ a3 _, {  g
export default {6 W' X5 B0 `- ?: _" F( f/ z
  props: ["content", "index"],# a2 H: i+ e% I) T1 h1 o; W) J0 T( v
  data: function() {! C8 b$ A3 e0 y
    return {};
# m/ I# h8 E+ H  a" o  },
3 \. \) e6 {5 u3 a  W  methods: {
4 A( g) g" `* `& D    deleteItem: function() {, U  P  r: K# Q  G8 C: o* ]
      this.$emit("delete", this.index);0 f6 H' W5 Z3 d; E
    }$ X+ r- [6 N2 |4 I* ]2 m
  }9 z; a$ l! T' L
};; b! E' J- K+ y! {7 y2 I  i9 g- _' G
</script>! H" R9 F3 S/ U7 p- Q

! q( C0 K% Z/ }( v" \
1 g  Y/ A. B+ ]$ M
, R/ m# z+ i( c! j: J+ }) V

7 D% f& h, ~. I
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了