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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
9 Q# [/ m- n9 {. Z& U
" i* Y$ ]! y) D, D1 _1 e

$ Y; f  M' h* G2 J0 D8 P  V  J8 i0 A- E) ?' u- J2 K
<template>  U0 T. u* K9 T; U
  <div id="App">' u+ Y5 j2 W4 {0 d5 H+ Y# l/ c3 D
    <input v-model="inputValue" />5 q6 i* T  Y. M3 E$ W4 T& a  V
    <button @click="submit">Submit</button>$ e* p" P6 R# }+ H! E* V* R; o
    <ul>
& \, f( t% t: p* c0 i; Y# g      <todoItem
. Y6 t0 P% R2 W' J        v-for="(item,index) in List". a, T- a% c, Q/ j
        :key="index"9 g% I* t. ?# ~; x: s4 ]
        :content="item"$ y7 F- J, W6 z1 I; m# f  S: k
        :index="index"; r' ]0 o, R" k0 C  t2 ]- V$ |
        @delete="handleDelete"/ E9 u$ Q8 q4 B2 p9 Y
      ></todoItem>+ q# \, C# S. e6 y7 U
    </ul>4 q! V! K( W  M
  </div>& b4 M; z: N7 i1 H% Y/ L
</template>' R4 s; H1 u7 K* I# Y

* q. @; S- Q8 u% A/ t: s<script>" K$ l8 m8 x7 H- E0 S4 R2 K5 m
import todoItem from "@/components/item.vue";3 e" {- c$ @% }$ K! L

' Q4 p0 v! }0 Cexport default {  @) u, L* T+ A; h  Z" D
  data: function() {
" [3 M3 C, \0 }2 k% O5 T) R    return {
' g' p1 O" R% C$ x  G' j, G      List: [],
: }! Y5 K  K" X+ e6 p9 z4 V1 ]2 x      inputValue: "": c  |/ Q; W' k+ G% C& _+ l
    };
' \5 |% ~/ z# b0 `# _2 L* W  },
# l; _! x+ q( D! L  \  components: {
3 f/ a# p9 i+ C+ I    todoItem
7 A8 e. Z* q: _8 _  },
& |$ C* q* f. h! q( J. T, F0 h  methods: {
+ M3 F, X- n! F6 b' u    submit: function() {
6 ]# _* N- h* G: w& |      if (this.inputValue != "") {
9 |; J# E" V# v. U/ u6 \6 }. p( P        this.List.push(this.inputValue);
+ c% t1 X  g$ g5 k  C      }
" ^3 g! h! W3 U% f1 ~6 `. w      this.inputValue = "";' ]& R2 p/ q, Y! Y; e
    },
* g! T$ r8 k0 y1 `( l% m    handleDelete: function(index) {
  \, Z- L- A1 x9 B' y      this.List.splice(index, 1);
) a. v/ \. p0 v! X% s    }
' d6 `7 q) e9 b7 U8 t3 T  }
( Y; `0 g! w% m8 M/ w};
$ l; h, {1 Z/ U+ T3 V</script>
( I6 _% f2 r1 Y, R& o/ s
+ j( E  C3 H( s/ E' \  D
- Z+ C3 f: ]5 d, d1 P9 q/ c

8 T  m+ A% k* j; _' C  g1 I, T* N8 I4 [  X( U. {# U

1 v$ r' E/ w- p1 }8 N7 P
( B' o+ o4 z5 A* l3 d' i& N! n' ]
0 v; ]! f  h) D  m  j<template>
$ \6 n  E: n# [* r  <li @click="deleteItem">{{content}}</li>
1 X6 u! U2 D7 ?, ~! i</template>
! T) i' _+ O! E6 w; L5 M9 W) \* Z. y. {1 T8 P3 v
<script>* V- v8 e  {: Q
export default {! c( v: \4 R( n" B
  props: ["content", "index"],6 S, N; [" k5 H1 W4 M/ ~+ A
  data: function() {
" k6 F) \, A% h- X- H$ v    return {};
6 `6 w4 |- F0 i1 ^! t  },5 Q' t* R; a: x2 J# \
  methods: {
- i/ y3 P6 J9 X) X. i; Z    deleteItem: function() {
0 S: g9 \! x" `; X' ]% r      this.$emit("delete", this.index);" ]4 R* k, R& Q4 @5 }, H  b
    }
) d* `, E  o& W" ?  }
" z* D9 ]8 y$ T9 Z8 s2 ^/ j# H3 S};; I  J) M: X) j+ B
</script>
% Y' o. [/ I# \
& _. B2 ^( D  r+ I9 ]7 }  A7 u7 K+ E0 o1 Q% G# ~1 G. u6 j
7 u* m1 e; g# C- N4 W+ _4 O; m

- ^1 V! J5 J; u; n- D
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了