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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

+ t+ w( `7 H8 r0 y9 {& O1 M
! `) I3 m5 z6 h$ e$ ~
* V# H' u; \+ c0 ~
! k% p, x5 e# _/ Z: M& f<template>8 W: j" J& ?# c. G; C9 ?4 s
  <div id="App">
7 e9 n& c4 @& @& `, _$ Q    <input v-model="inputValue" />
- a! R! J$ e+ i+ A8 ^. Y  ]9 `    <button @click="submit">Submit</button>. i! c; j8 l+ _4 I% w8 Q- ^
    <ul>
& Z: t; n5 \4 U$ W. C* {9 h+ T) k/ N      <todoItem
+ n. q" @5 U  n$ ?! I( U  v        v-for="(item,index) in List"
1 ?* \8 R4 ~1 f        :key="index"
  ]( X0 K) G& R        :content="item"
$ q- d, k/ G! g0 I. Y+ c        :index="index"9 L- t6 r: W+ _/ w3 Z
        @delete="handleDelete"
# c0 {8 _0 f' x      ></todoItem>8 @' Z7 a$ K2 U
    </ul>
1 E+ ~4 v, O5 B  n9 E" j0 c' ~6 n6 V* k  </div>
# R& q3 Q6 O, ]- X: Q7 }( o& C1 Y</template>- n5 ^$ x5 {, @
) L  C  [( G- m' p) G8 s
<script>
9 c! f4 {+ {6 D. Z! }5 vimport todoItem from "@/components/item.vue";
3 Q0 T! ]7 K& P, J* S! e0 [( k) M# e( [7 }" B  Y
export default {
5 h6 P8 q4 X5 m/ j2 Q1 s% v' `  data: function() {8 m: d. N3 ~# f6 d, K8 f  q7 g
    return {
3 s% T/ K% t  m0 X* K      List: [],! q" O5 |9 g7 b8 F$ Y! X
      inputValue: ""
0 {" u/ J. Z- y) Y: D2 B+ A" g    };
; Z4 o. R5 B4 {. a7 P2 _: o& C" g  },
1 I/ _  F  m. c& N. {* r) q0 l  components: {
/ W1 U' {* u& {% m5 I# R! j    todoItem2 k% x. J/ ^% q3 o2 |; V
  },
) ?! v" q7 N  J7 `  methods: {- {  v- A/ b; Z  t8 H7 i
    submit: function() {
* ~: |/ ^. ^8 `      if (this.inputValue != "") {
  h" g* f4 S& l# |6 R        this.List.push(this.inputValue);
9 Z$ P* p. E( w) E3 `      }
& h" j6 y! c# g! s0 L, S* M* @1 |      this.inputValue = "";
1 K4 m9 T/ \  B+ l: a- m    },$ g; J8 r) N4 E" A
    handleDelete: function(index) {5 K. ~1 V1 W7 r, e. }
      this.List.splice(index, 1);1 c: n& B9 c" G; c; B
    }
' W* V: B1 |. h% o' l# ]0 ~- C  }
0 Q+ b& u  H1 O( _' z: k1 Z, s};
" b, e# m; J+ O9 n% M</script>
' ^! I) O9 q1 e9 x* S, @1 S: b0 l  `/ _/ @

& j7 M' f, B3 x( u

' W  M+ S, X5 B( G$ |. O, }9 R
- H, {! _/ _% O: u: W9 A
  Z+ H3 M& Y5 x* B. Q$ Z- [
  A' p- A8 h& L6 t- Z9 X  a2 t
2 [, x% R: I/ O% `0 \+ J% o<template>
2 g1 K5 q1 d0 e/ m  k  <li @click="deleteItem">{{content}}</li>
0 H0 P" c0 K! e& `0 r</template>* O7 w, `  b$ F- N. k9 C  }

$ E; u  m) P; `2 v<script>
5 w( r8 R8 @2 W$ F/ O. e, g1 P* U! u& Fexport default {0 Y; O+ Q3 T. K1 y/ K
  props: ["content", "index"],$ \2 O' I% O( i: p
  data: function() {0 z( P3 T/ H' G" S0 K
    return {};
; E  }. |9 f2 z  },: {6 Q  ?  G/ g% J
  methods: {: _* G" L/ O$ Z6 l5 P. k
    deleteItem: function() {8 P2 X8 K9 J5 G1 F0 T- m6 m
      this.$emit("delete", this.index);/ n2 k9 h; E- c2 k) y  T# {
    }
0 ]* Q3 ^1 n4 y1 d$ B  }
# ?: v  ?, s  E4 M0 j};8 c) n# z+ `. {9 U
</script>+ K# l3 q% Y  \( y' S2 |& K
9 {) C7 L" w/ B4 J
" q, i0 O# X% i  }

; V! Z. b' {  G$ A3 A* W" S

; L" r. b0 d- l5 C7 @
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了