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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
( w$ d3 _2 g( O5 D
: c  h7 \% @  ?# `$ Y
% w3 q8 ~9 W+ `* U4 z* f' e! A
& Q' a+ I" I" u8 n5 n
<template>6 T1 V: _- }2 ~+ j9 _0 E
  <div id="App">
! p9 b+ h. a) G5 C) i3 e    <input v-model="inputValue" />3 s6 ?' M9 @$ H0 z) L  U$ V
    <button @click="submit">Submit</button>, W* N6 D2 s* q4 j9 |* R
    <ul>& j- l3 K& `4 P) c
      <todoItem' v# o/ P& o8 f0 w5 R. G4 n; J, l
        v-for="(item,index) in List"& y2 F; j* f2 [
        :key="index"
& V" n* r5 `$ R9 K        :content="item"
: q! a' M' q5 ~        :index="index": a8 ~6 ~& h1 z3 f
        @delete="handleDelete"
! V+ t, `% D! z7 k- M+ `) a      ></todoItem>* N# n( k- E5 S/ Y- m
    </ul>, y; p! c; J+ W
  </div>& [- t5 z+ P; s+ x
</template>
- w# l; @6 G" Y6 ?
) }% G( V3 A! O2 q<script>% U5 T. G' J" ]3 x& z
import todoItem from "@/components/item.vue";5 K8 D9 S$ g: A  {* |# P$ c& R4 ]
, H# n2 w1 W. Q3 V- V
export default {
# Q/ x# E0 f* y0 I1 S" j3 I; w  data: function() {
9 {! V! D  n4 P1 h0 @7 Y! A    return {9 z( e) U% u! k+ y; u1 B
      List: [],) B+ [% _( L1 w2 B- J
      inputValue: ""
/ E% l9 g5 n: U0 e8 u: O5 C    };' h' V& t  D- Z6 ^! T
  },3 r, L4 p( P. l1 u; o9 X
  components: {) E# H, B" Y# Z& D: d
    todoItem+ l/ \6 j! @% U4 g3 h
  }," P' N- K* K9 O4 D2 M7 K
  methods: {& A0 m8 ?* R( i2 @- G, K" v. Q
    submit: function() {
; B0 c0 S( I; ^: _      if (this.inputValue != "") {/ l3 x8 i' o* {7 v% E: s$ S* ^
        this.List.push(this.inputValue);
% g0 @# y2 v  _1 |" _4 K      }
' a6 i" l) s9 v7 C      this.inputValue = "";
2 z; O" P3 z, p, p2 F    },
( S- {3 p9 _6 A; c7 s# u    handleDelete: function(index) {9 g! G. w8 L; v
      this.List.splice(index, 1);0 g+ }  r! @3 F& r* Z* D. k
    }# w* p& B. t) Z: [0 r' f3 ]6 b: h
  }
  G5 s' n6 a! w! ?: T1 o0 O0 J+ F};& |, v) e( k4 o0 r3 v5 G: K
</script>1 r' D; H4 p. x4 l5 _0 ~8 w7 i" ^
6 O1 a; v! h1 p  R

# {( z5 `7 H- h& v

. D8 {, n" _7 r" d5 ]7 h. k( r* o3 D' C( U7 h/ H' r  @5 C+ d
6 v5 E, T* X# [; w8 |& F- W
5 B. Q) z. J$ p8 R
8 a, N# W  v2 g
<template>
9 U  ^0 ]) S9 ~2 k  N/ X  <li @click="deleteItem">{{content}}</li>
7 o; y  i* ]$ {+ P6 C; ?' J</template>
/ B! Q% x6 I( F
4 E" `( J3 T1 ?! b, z  c<script>
; l7 J8 ^% @' M; j+ Q- m5 U/ M9 Mexport default {
4 @2 v8 R5 k3 m; N& ~* @- o. s1 r  props: ["content", "index"],# g8 i$ g' o5 U7 g3 V3 E8 C& t
  data: function() {0 }6 r0 X' a# u4 v! z
    return {};
. _# P, l/ u  e0 ^4 N9 X; U  },0 H7 h5 M2 s2 X. ^
  methods: {
- \9 A+ Z/ Z& k; ~    deleteItem: function() {
  c4 S" `3 o" W      this.$emit("delete", this.index);
: u; ^3 \5 W, S. ]" i+ B, i* g$ h4 L    }' [+ f4 i9 e2 r
  }
1 {  b/ I2 ]1 d1 |};: p. X! V9 r# z
</script>+ T/ Z2 @$ ^6 J% e. n6 E1 a3 k
' P) p# n* H8 m7 N) d9 ^0 O; P

9 Y" ?# r0 V4 N$ b7 \. i
$ [- e5 g* E2 L- }' e7 ?

$ n6 t# R4 M; O
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了