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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

' M% g5 R2 q) J8 f8 x( M
7 ^- ~# J4 w- C8 d' Z) o2 s5 Q* X+ v/ k9 |
: ^' N! p* F7 Y* x/ c
<template>
5 A1 ^0 D6 t3 R, _5 e" ^' ^  <div id="App">
! X0 }8 D" o7 H! ^9 R" v- P    <input v-model="inputValue" />' [2 \0 \2 Q4 i
    <button @click="submit">Submit</button>
3 _8 l: l( w2 u1 v    <ul>
! }8 y- ^5 @4 n* B+ `) N+ y      <todoItem9 _$ K. S) w3 i3 T( R
        v-for="(item,index) in List"
! I  u* D5 U( {& c; L& i        :key="index", u8 ^! @  _0 ?( z! J, e9 e; S% v# {
        :content="item"
' C+ r+ ?7 N3 g* H) S        :index="index"
8 E7 H; \( Q- c' r9 C        @delete="handleDelete"$ d$ ~8 Z( p; \8 {4 I  l% o3 I
      ></todoItem>
8 ^# m- [& u% N5 L9 W) W1 n    </ul>
1 ^" V* s3 V9 Y1 L1 [: Q9 z& @2 d  </div>- z6 F- [7 ?% ?- o
</template>) |2 q& C; n' w: T2 z

( A/ ?' b5 g& y/ T- F7 N, p1 _8 G<script>0 L3 @  B, C7 D7 V7 N/ _
import todoItem from "@/components/item.vue";! S2 q3 [6 d" J6 T

+ C1 T0 G! J$ S8 |/ f- Kexport default {2 i7 i) z1 m3 _
  data: function() {
. ~4 R& a$ v9 C    return {
7 ?3 R' |8 g/ p, k) @( @! o7 f      List: [],
7 y; L3 W9 _- L4 R; s& I" a      inputValue: ""
- f, y5 G% a/ f    };( d. h1 k  J7 U7 i; Q
  },
: P% z- C! _" T, Y1 |2 j/ Y  components: {2 i% X. ~8 r7 ~# M3 c6 o5 J7 s
    todoItem0 D8 W: n0 s6 _$ K4 Q+ a
  },
& F+ J, b; f4 d5 x( }3 W' d  methods: {$ h2 m  ]$ ?( Y/ `! }
    submit: function() {3 O$ j0 b- x5 L+ P( J7 L, L/ g
      if (this.inputValue != "") {3 p# ?! K0 |% M% m& J
        this.List.push(this.inputValue);( T0 g) s) I3 ?8 J) F, [: H
      }; W- o$ m' V- s' L4 Y1 O9 w, x
      this.inputValue = "";" L1 M/ ~9 \- e0 n; K' ~$ @* j9 F: V
    },) P: n* l' w) F. ~, a: d2 e$ d
    handleDelete: function(index) {- I* U! W5 U2 X
      this.List.splice(index, 1);3 ^$ R9 e1 d, ]# n1 l$ X
    }
  ^) Y7 }* E  e9 a- ]. v  }
0 t- ~0 J; ], v9 C};1 J1 I8 V, ?1 @! N
</script>: j) b1 R! D: f5 G0 g6 K

# P( |& O& @$ w) L1 {* E5 O( v* [) l

5 _# h- N5 o$ p8 c& @) c. N
6 z: r) _4 c$ F% }- N; v0 i1 v% |; `- K" n$ n8 Z8 ]1 G6 V$ N2 O8 r! ]

, i, D( c; [$ z% z# o" x. c; z. @& A, `
. W6 T9 a4 E# U% {4 @* ]  {0 x<template>8 e" m: F  m2 h3 e! Z" B
  <li @click="deleteItem">{{content}}</li>
& J3 w) G) d( D$ d</template>4 w3 B! m7 I4 s; D1 e0 M

4 M' U0 q) _  g+ k<script>7 q8 q& H/ @) H& \4 ^$ N$ _4 [( T
export default {# k/ ^/ W5 x, _  ^% P3 c
  props: ["content", "index"],
( n& K9 t- P5 L  data: function() {
/ V0 h7 r2 N, e. v' c% w% h    return {};  S- c) a9 u5 P
  },/ [% |% t7 ~1 V9 c4 d
  methods: {
& X) h; Z3 c4 ~8 I' w; c/ I. w4 ~    deleteItem: function() {, f. O. m$ q$ b- C7 {
      this.$emit("delete", this.index);
- |7 {! ^7 s# ~3 A$ i: p    }4 g. v& C& `2 X" Y* y) X2 X$ w
  }* x7 }: e) _  i9 C5 s3 s
};) J! [9 _/ h5 e0 f
</script>" j( A; \% K* G0 Q1 Y, U

+ Q' Y/ Z' v) ^- f6 V/ b  }1 `* b& s& E
8 Q0 B* L4 E4 h& m+ f% @% z2 F
: L8 Y1 e8 N7 M- h- a* x
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了