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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
0 M5 R% @# Z* G. J
: C' f0 A8 Q4 z* s
* U( [- P: [7 D) X6 h# z
* n* s  m# v# s  Z
<template>- X+ v" u9 s; G3 X
  <div id="App">0 H) n8 S) `4 j; s+ ~' R
    <input v-model="inputValue" />7 p5 S9 W' I( \. C$ p1 T. E
    <button @click="submit">Submit</button>; s! ~+ O6 ?' W* ?
    <ul>* S' D0 ~: D9 Y
      <todoItem1 B/ c1 g6 Q+ @' W
        v-for="(item,index) in List"1 U/ C" @# _) d2 i$ s3 a! w- l
        :key="index"! w4 ]+ @. k9 I" Z" _) J  A$ v
        :content="item"
; \1 e0 ?6 H8 g3 K        :index="index"5 h  ], Y; q1 z& f( Q3 i7 u8 j- L. E
        @delete="handleDelete"; C, z( ]& Z* o- Y, g$ w
      ></todoItem>
' t, V% m8 ~. L: C( M# b    </ul>4 D0 j- M4 G; E5 i) K& K# `
  </div>! N& m* M6 Q* J+ B$ \
</template>0 [- J0 M' L2 U' ]* q
% o# P- g1 h- Z2 X3 m1 F$ y! p
<script>  l: v! `. Z/ _3 y3 B
import todoItem from "@/components/item.vue";
; @+ k+ G0 v# v6 r4 I9 p: A1 I5 ?' r$ f! c) O
export default {2 u. }, [( I/ t+ s- l( {, ]% ^0 o
  data: function() {% t% _# y4 b) }! p, H! X8 |
    return {! c- N) Q- J6 J3 _& b9 w
      List: [],
& U0 Y# Y, J/ S% o! ]1 p/ j      inputValue: ""
' S9 \! D1 M) H6 R- |6 ]    };
) G/ l' `/ g0 a; Q! C* s  },6 i' [3 C: d0 @& h) j' ]2 w
  components: {) r7 k4 c( Q' k; i: Q
    todoItem& q$ ?$ N; N; ]7 P
  },8 |  M, g7 C- Z1 V/ j
  methods: {
% p0 X8 |8 {$ _. ^- R# i    submit: function() {8 R9 m9 q7 ~( t
      if (this.inputValue != "") {( u- ^9 e2 X3 Y: Y" ]& A- ?& s
        this.List.push(this.inputValue);0 m3 I3 \3 y& N$ b
      }
2 k- F2 Z8 o8 ^5 |      this.inputValue = "";+ f. K5 f+ `0 l. D( A4 Y* O
    },. `  u4 _$ V5 J0 g4 q/ G% [
    handleDelete: function(index) {
6 w4 A8 Y- u, }, j. l8 p6 c& `      this.List.splice(index, 1);
8 g0 F' K: L! p7 F    }2 @7 a" L  `4 y- E  i) u
  }/ N. F, G3 r: k! O9 ?
};9 e, E9 f8 r/ i7 p# X
</script>/ _: |: u. e2 X: M. }

5 L0 a$ `6 j1 v% }8 n; I0 y* T5 a' {7 @5 y* s, j; d1 s

& i* ~% R3 I) e/ j' C
( o; b- g3 \9 t4 u& }" k9 P8 X; |
+ O6 J, W: W7 Y2 e/ A; G. c: Z% m* E. S, z7 q& x
& c' x2 l) I! u
<template>
2 T8 R# T4 ~! \; ?/ M! G/ Z. a  <li @click="deleteItem">{{content}}</li>2 C9 ?5 A# e! N% J' U8 A
</template>& ?0 e4 F/ _: \. }- c7 `6 y$ |

, `% N" ^2 f* T<script>
9 c) u: Y/ l3 ]( R( cexport default {
. O- T. B2 x* a6 i  props: ["content", "index"],5 ]: W; D2 U6 {+ W' z2 t; M
  data: function() {
1 X; g/ v. n1 s! X% m    return {};
$ N% u) c) ]& Q1 I8 S  },
( ]. {, z6 V) V  methods: {
" N% c8 R& L/ t1 S0 P1 x* D    deleteItem: function() {
" O! @6 z* u* E/ x- H      this.$emit("delete", this.index);" X# L% Y! C& G0 }6 j6 R* E/ g0 O  n
    }5 s; {" ?: @# X
  }
/ B9 e$ X- p/ B};
/ G4 \( z: S% @! v! k( d</script>
4 o* i# x+ [/ e- ~$ U9 x" k
+ E+ A, W4 }# G1 x! ?0 e
- |; u- r5 L2 W

$ h  ?& |2 Q- K7 W. [/ R9 e
% s' ]# r0 N1 N0 x3 W
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了