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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
- D* _0 S6 Q8 j# G( K

: Y" `5 ~# R( M5 m  g) r9 H6 n3 q! l+ f# W

( p" l0 g0 {$ w<template>; S6 D# d2 k* E! G9 w
  <div id="App">
0 {& `9 W( P# G1 r  \    <input v-model="inputValue" />
% F, z5 p  w. r: d    <button @click="submit">Submit</button>1 v/ o0 n* V' o, b1 k% u' B
    <ul>
$ i/ U% L' q& \      <todoItem
& E1 i1 h) Q% Y( F& O& W/ Z5 E        v-for="(item,index) in List"% }0 `  n1 ?. `% J3 i$ i/ {+ p
        :key="index"+ }* ^3 I6 W. _  \3 Y
        :content="item"
' M% s' S0 b& a' @: c        :index="index"
! T' _% `: t: ^6 J: x+ ^" i: r        @delete="handleDelete"
7 L  b% G( r+ [5 c/ p5 D. \0 L: ~2 u      ></todoItem>; B6 f" M) |! Z  x
    </ul>7 y" a& u6 {; ^0 g7 i7 ^
  </div>( }5 R$ L6 u4 y# `- j
</template>
& V: A. I* U) ~1 R/ Y
7 k1 N" }" o( M' F6 b<script>7 p8 w. o4 J4 m  o
import todoItem from "@/components/item.vue";
) ~& n) E  |& i% T
! ^/ b. }5 T+ b% `* U3 R6 W  Uexport default {2 }& g# M' e- B
  data: function() {6 y, Q: J0 F# }0 T% r: ^
    return {
& x; ?6 O1 s2 d' J      List: [],
: K* S# e* x/ }8 T1 u5 ^# `8 S! h. Y      inputValue: ""; J* S2 Z: w& b' h8 t8 c
    };* R2 A7 b$ Q1 R8 ^: @
  },$ M" e9 m% p1 l, n# k, I6 p- ?9 g
  components: {' N1 f# ^4 O8 T" B. Q8 n
    todoItem
. ]( I: U7 P3 H1 |0 @  },/ j: E/ e' F& A+ B8 l7 O9 X0 D& X" N- r
  methods: {1 Q$ q4 J+ U! L& o- G" X9 L
    submit: function() {
" [% `3 Q1 J4 I% i      if (this.inputValue != "") {) w' K7 N5 F  l; K* C( y) L$ \
        this.List.push(this.inputValue);' L# H( u& o1 r$ ^4 V0 Y9 q
      }
2 n8 B9 |- a6 ]: w4 x5 J' X      this.inputValue = "";
$ X: s4 @: T! [7 N4 I/ t    },, s( W' q8 i, c8 n, |+ S
    handleDelete: function(index) {/ X3 u; W2 x- {- n
      this.List.splice(index, 1);
; r- O2 l+ C0 r    }
: Q( B2 e# x3 r5 |  }
) I; r6 P: g5 x1 I' n1 e, o% W};2 \% S% w: h' D5 U1 ]  q' F3 D
</script>  ^- f. l& b! d4 X2 c5 G9 w

+ X, [; p, m1 l
. ]$ E  I' V) C6 R; I+ }

0 m7 D- T& z- W3 K' y( @7 i+ K$ y. G) R( s$ n: A6 w  p
6 k+ ~- f/ H. T

8 ~3 D  Y$ f: U  o, [4 O( A+ x( h/ c+ D9 X, z" ?3 Z& s* c: V6 M/ M
<template>& b+ G1 i7 ~7 E* J3 r  ~
  <li @click="deleteItem">{{content}}</li>
. h( S: l" ?1 P3 p& a3 ?: i" c" X</template>% |) f# f/ t3 m

9 D% G; f# v" L- J# E<script>
3 j6 S9 i3 Z6 Qexport default {
. q2 |1 S0 y2 v; U/ B  f: R' V1 |  props: ["content", "index"],
8 s+ ^1 t% C% n% w  data: function() {
! P) |# |9 N7 I, }    return {};
4 H* y4 L2 |; ]* g4 j" c  },
4 |3 O" Q1 o  h, E4 U# e/ N/ u& ?  methods: {
; `2 P' c2 V  K6 f    deleteItem: function() {* U/ x( c5 }. k4 G" ~" X
      this.$emit("delete", this.index);! b, J: s8 ]7 N2 q' R
    }
- o( m; n& x1 b  [) Z  }
9 e  U  R* x) j7 P6 A- K  M9 H0 j};* \- K% k1 [- w7 s
</script>& E* @# k- ^# B7 y" n1 O/ [

, \  j8 N8 X* b" k1 ]; R4 ~5 u3 B3 W) d; z3 g4 R3 E3 {7 t
2 ?2 G5 }4 Q; D# n  `4 G6 ~

6 x! M, b5 O/ a) ~- ]
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了