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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

% x3 j& t4 V- }; b8 C9 d1 j2 e! Y9 Z! p% S/ W1 Z' p

4 m% z# j4 E. W7 c8 h; n# M0 U# t
<template>
8 C' l6 d6 @9 T0 H% P, X: t  <div id="App">
; h; I0 \/ H; M2 k& Z1 M    <input v-model="inputValue" />
  ]" M, t" d+ w5 u    <button @click="submit">Submit</button>
* i. ~& R* ^; e5 y    <ul>: P& o: I9 X1 B$ r
      <todoItem
! h. m- N( w5 I, [7 X2 J" [/ n$ y( \        v-for="(item,index) in List"/ V; w* v8 j# k9 A8 b7 m" F
        :key="index"
9 u' o6 p* B* j, o2 L6 ]        :content="item"
% `6 S) ^1 y# f: L* x" X        :index="index"
! F% P& _6 T( u  ^/ F* _        @delete="handleDelete") g: |7 x7 k6 E; u' I2 K: j/ {
      ></todoItem>
& _# p3 `8 G5 l. Y    </ul>
5 ^) Z  s% ?" R- l  </div>) ], U5 Y" Y1 g7 e2 o
</template>
$ M; b1 U3 J# H# D* N+ P% k* V4 t8 ]
<script>) f  P4 U- B8 G0 m5 K) B* f1 H- l
import todoItem from "@/components/item.vue";
9 T1 P3 i+ T/ n5 f" `
1 A' g8 N/ z/ z" Xexport default {8 l" N# y2 ]2 d) i6 A  [) p
  data: function() {
, {, u! ?( w0 T# K5 n- ?) B1 l' C    return {
8 x+ R1 r4 k% Q. D3 H      List: [],
3 j  u' ?- E/ @      inputValue: ""3 R/ O8 {7 C" |9 ]
    };
6 R9 |) H* A( l& V+ u6 ~/ m! h  },
$ C# h( V. J# p, F! n7 Z* c3 H  components: {! f9 F8 w) h% ]& D. z: [
    todoItem
7 h3 ^! B# }1 P; G. K( ?  },
5 v8 M% ~: }; s/ S' J% n# d# j  methods: {& ?7 D, p( {0 x' H% H# E2 b
    submit: function() {
* j. \. W2 \9 C. N7 I1 H( @! X      if (this.inputValue != "") {6 j4 l# F7 j" A: ], \
        this.List.push(this.inputValue);8 e# ~& d- s: S% c3 `2 Q" m
      }
; @: \/ s2 y) {* Y6 E      this.inputValue = "";
) F5 O8 y% h( L7 {! A    },9 \/ D% \) |: F
    handleDelete: function(index) {
* d, ~8 ^; T. Z3 Y+ Q! n      this.List.splice(index, 1);
( v! F6 l' ?$ y# X$ t    }0 q7 `, D* M  M) N
  }
0 N) a2 T. v/ P7 @};
" T$ Z$ u( D5 S* F6 i</script>
2 V' |0 N  U  ~. c; T* v& N1 e) H% H' n% a

* A- P, c. y: v9 n
& L, T; V/ m/ t
- Y; w# \+ B9 O/ ~

  R1 x$ g- B7 H' S* Y1 ~! h6 t7 S/ J" Z

( p' }. j$ [+ l* {, |) M4 X8 o3 ]<template>
5 [% b0 d* O: P$ A  <li @click="deleteItem">{{content}}</li>
* R4 t1 v8 y/ M</template>
7 b4 u5 W& h  T5 `9 [, H* n: g) R
<script>- M; X" Z0 P) p; s, j  J
export default {
: k9 K/ }' W" Q1 ?! J) ~  props: ["content", "index"],
; L4 Z$ J# D! e; U8 X1 _2 D2 X  data: function() {
, A- j7 S3 f) s1 z1 h2 K    return {};
2 H% t" \( O) k9 y4 U: R/ D  E  },
) x* c" f* _8 M3 `4 N1 H" u  methods: {
+ X2 O* p1 d2 ~$ _    deleteItem: function() {) z& U; N8 {$ w9 a
      this.$emit("delete", this.index);% {( {8 ^3 c  ?9 v. M; U
    }
3 X& q  B& c8 x/ [  b  }& q3 @! b4 Z& s3 u/ n
};9 `( @8 W; e" B! b
</script>5 r2 b0 r6 E* }( c

5 ~$ @) l# N" R% c" r# R) D" o! Y( D4 u: W8 _% E
) M% M& ^% Q% j9 N1 M% D2 G
8 C% O7 @2 K5 v% Z- r
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了