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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

6 u- }; c. n: a# ~# r" e- Y. }

& M1 {" C  o2 g! H2 G3 x& L9 e0 l' T& y- Z
<template>+ k& F: l. t9 }  j- A# f) z# H
  <div id="App">
9 w! U# [' C% Y5 o4 \/ x% E    <input v-model="inputValue" />
/ J+ o* N" e1 w1 P    <button @click="submit">Submit</button>, V- H  K/ `" I
    <ul>! e. W6 x5 X6 I) V' F+ r
      <todoItem
4 y& ?' ~2 A- w        v-for="(item,index) in List"# ^) D8 n. A- k( k- y- ]
        :key="index"
9 s! \. g; q. F6 B7 |  ]1 [$ z        :content="item"5 B! k' R" L4 o( S( `3 e* V
        :index="index"7 S! Y" ?- t( {  w3 ]# r2 W& E
        @delete="handleDelete"# n! n) c$ D) E8 _
      ></todoItem>
" Y4 {6 C& E/ m% \+ H7 j2 M7 C    </ul>
  [! h% P; J: z  Y  </div>
1 S: U4 R: p4 h+ W+ a</template>( P, Y8 @* [% f# s2 ]) \5 Q
* Q3 m+ [4 f4 g9 C
<script>
; f, n: L0 U/ A% @& ?; o. j& Iimport todoItem from "@/components/item.vue";+ Z5 F; l5 w3 C
! I. x- h" W3 x, {) A# ?! @3 C7 S
export default {
5 d3 N: c) ~- Q  data: function() {
$ d; U! t% s  e6 L5 g    return {* _8 b. }4 T- X3 F
      List: [],0 b" X& p3 t0 V3 ]' Z0 Z  Z1 n
      inputValue: ""
7 y3 |, D2 }7 B7 t! m; i/ I" ?    };+ |2 _  [( {! _. O) n8 x
  },' i; s' ^4 I- G9 v! M4 q
  components: {
/ O. Y+ }. W1 w& ^    todoItem
0 E3 n3 o2 @* X3 O5 P  },
% [! A/ R+ R/ Z& y4 v  methods: {$ j) C6 s1 ]& h+ N
    submit: function() {
- w6 E* E& E! C" z      if (this.inputValue != "") {8 u+ \% d! E  n6 W: h* S* L9 ]
        this.List.push(this.inputValue);
! Z0 }9 S8 c' H% K+ q/ H+ p      }
1 q. N" {, f8 h, Q" L      this.inputValue = "";! e! E2 J5 ]& Y) t8 P
    },
, H7 N9 S& G4 k) O% z    handleDelete: function(index) {1 |4 k- B7 V1 A/ @% }, h
      this.List.splice(index, 1);  X; Z0 g# c  q4 b! q
    }
8 H' n& o; F  ?4 y7 x2 R0 P% ]$ K  }
6 s8 r+ b+ H- T1 C" u* o3 S};
" x4 `! F! V9 o& J& \. L# Z</script>. H, l$ ?7 m* V6 R) o

% i; C1 [! K. D, I
+ A  N( ^" D0 L* @; V. v

* t8 y1 u  l- @4 A0 {1 [7 i$ e* |# |: L

# @, \) V6 |# f0 b2 a  Z$ y
$ }/ [- M7 o( q8 s
5 s- U  i9 W' `7 Y<template>) Z2 r( ~& _! c8 V& r( @# M. a+ A  c
  <li @click="deleteItem">{{content}}</li>9 Z% ^. ]- n7 m- ~5 I9 H; Y" P
</template>
: e' r: T' q) o6 }7 W! T. u. K% J" W# P5 Y. D& _- L, A9 _
<script>4 u! S2 P! P4 h  R7 ?; F
export default {
9 a0 \  K& A2 }0 m! W/ X  props: ["content", "index"],
6 y$ T% m1 G; t. e4 K4 [. s( o  data: function() {
+ d" |& S) G0 s1 f9 J. X8 l    return {};
/ i0 l9 k; z& f6 C/ p  },; Q/ }) a2 n" u1 M
  methods: {5 l, T: T' @: F# E& j  C
    deleteItem: function() {+ _+ w" p6 x1 b: C
      this.$emit("delete", this.index);
5 U. j2 H$ Q5 E2 `; N    }4 j# {- e5 b) j1 c8 S7 w4 b: j
  }
- [4 |) C+ j" R; n+ W& A$ s};4 B. t; y' L  q3 [0 m6 K
</script>
4 }, A$ f9 |* C! X- l0 d2 G" j& g7 }5 O& t. I* q& j; t

3 h! I& N2 ^" |- F

$ }& `5 Q* t# b- i7 S  s
) ~3 q. ?; e3 t; _2 O: @6 M
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了