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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

& q% j* E' d: i% |$ Q# t2 D5 B. P; w7 D$ ^5 }. u; E

# |: {% H# K, ?! l& n* _/ P  M7 a( r" ^+ T% i+ v* H3 _
<template>% n7 K: }2 F6 r8 m! Y9 J4 s7 L4 i
  <div id="App">& `4 E2 z9 D- W* a+ \/ F
    <input v-model="inputValue" />9 H) n$ H+ e' l3 C& U& |; ]: R( E
    <button @click="submit">Submit</button>
9 [* b0 f: I$ \/ t) M    <ul>
& t; ^9 a/ o) [& g      <todoItem$ Y5 d, I' Z6 d% `( _
        v-for="(item,index) in List"
* y+ A! e, d: N+ V4 `. [        :key="index"4 A  q9 F8 k; Z7 \. J( v
        :content="item"3 F) ^5 O0 ?3 |: L
        :index="index"
9 v$ I( c- y) s        @delete="handleDelete"
8 P7 a0 u0 H. o1 ~. [" _      ></todoItem>' t6 g9 L7 f8 S6 T- J# u5 |0 i- g
    </ul>
6 |) u* R6 J: O  </div>
2 ~' z. Y6 Y. ?& b</template>
! d6 L4 I, ^1 K0 E, F" L( L7 l7 n+ P8 j; _  U  j
<script>
8 b. ~. e/ J& m! Q4 Uimport todoItem from "@/components/item.vue";  A" P) s" e) Z( a; ?- h
" v, d4 J3 m& t6 K
export default {& f% Y2 o1 C& Q, o
  data: function() {
% Y1 V% d# D( }" Q9 E% L  u2 p    return {
$ \* M. q& ^* @$ x1 ^. k/ E      List: [],
! F- T' S' v. e( e4 |      inputValue: ""7 |1 P3 ^* J# W/ l7 ]9 ^) b3 r
    };
- E* E& {# ^8 i* o4 ~1 W' |  },
8 l% k- v4 o6 p( s2 [% e  components: {# T$ f& [; ~) Q
    todoItem% }3 x/ b. Y& M8 m
  },5 H5 `! n  M5 s& _. _8 h$ m
  methods: {
1 x5 ]9 a; c* _* Z* _; R+ s1 w/ H    submit: function() {
* a1 V9 U( I0 g0 L! K      if (this.inputValue != "") {
4 A6 I9 o6 d2 z: A: f        this.List.push(this.inputValue);
- c0 Z: n7 J' K1 `! V      }& \/ P9 F8 b6 k) c
      this.inputValue = "";! M+ e8 D* Z7 _) E# N, ]
    },
0 y7 [6 V+ l, n# u5 ?; s5 {    handleDelete: function(index) {; w, n; a0 ^& `6 H5 p
      this.List.splice(index, 1);
; `) J5 b! N' q: W+ G    }
* u0 }* o$ d+ r  P4 u7 g  }" U% x& y( Q" r  Z3 A' M* r2 P
};
- p) q8 @5 ^5 P$ S  j! ]</script>
, x' {  d; y6 `7 C9 G8 A0 J( K- H: u6 K% K8 `, g

/ `. A5 k. i6 N: M3 k" O
$ r) U' j  M  ]; ?' V- [5 m

: ~# Q1 V2 s! D$ T, k
3 z  J5 _7 [0 k- n+ W- W
+ w& d. f  ]- n9 V7 n
, U( E4 j" c! ], c& d3 b- n* E<template>: c" H: S' L" t1 ^" f' w* N
  <li @click="deleteItem">{{content}}</li>) F  ~. J+ {3 `: P- ^! K1 t; b4 W
</template>& m/ w6 z8 T& |) z* ^; L& I
; r! ^6 Q: Y) V- u2 Q+ Y
<script>/ ?& }: ?) }/ z- X
export default {
4 m0 B5 w2 q3 z& Y. x  props: ["content", "index"],
" R- ]7 d# I9 ]; U8 }' n  data: function() {
5 N  M* h' m+ p4 s9 k    return {};
- C% U' P; W2 U" h4 K' f: g( H  },
. `" b+ K& X& ]3 U  methods: {( k. _; {# |6 p' W7 s) F* c
    deleteItem: function() {
/ a8 C4 \8 L( E* @1 q      this.$emit("delete", this.index);
  w- e$ l0 E! U/ f/ ?9 |7 M    }+ z# g  A8 V+ `% h$ V( g/ A& i7 m) m" S
  }+ O( B* j4 ^# ]# T
};& w1 Q% u7 a( ]( D5 l) I
</script>" b/ w# Q. m( Q  u* X1 @
0 i( ~5 x/ O; ^5 D

4 i7 q2 o- U/ o% V* a- p$ d- K" ?
/ B! o3 N4 n; U* e) u. Q/ M
5 v8 ?$ v( y  e! k
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了