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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

4 ^, `+ h. I9 [2 g' f% E
. P! H4 q  D# y8 e8 X* L  E% g4 ^0 S& ~4 z

* d6 \  U. r, V! n<template>* Z% w0 H9 h- R2 c3 i
  <div id="App">! o; ^3 j4 i5 o- i
    <input v-model="inputValue" />: h+ z2 ]$ H2 ~7 }
    <button @click="submit">Submit</button>( Z" E, H+ X$ ?" d: v. C8 b' N5 A
    <ul>' x0 c4 @0 ?; g* o
      <todoItem
; Z% |# z9 k# D: P0 K5 [/ h0 x        v-for="(item,index) in List"+ y8 n) O+ H) V
        :key="index". {* U4 h4 r! U7 z0 N3 r; R. m* m
        :content="item"6 O) r* U: ^. C: f1 v9 I( j
        :index="index"
8 @- B$ |3 J" W2 R0 N" y        @delete="handleDelete"
1 c. @, S, a; I2 h, S+ R: s& i& |      ></todoItem>
; o+ s6 ~+ i( p) Y# x, k- I6 m3 V    </ul>" O, V& ~9 i+ X
  </div># L2 z# \6 m; b& [- s
</template>
5 @( h- s& d5 {( T
( H  D$ q& d* Q4 ~% o<script>
* K5 X, Y% o/ W  A$ vimport todoItem from "@/components/item.vue";# Q( t/ q& i$ y2 k" W4 a+ |

" l* X. O. x9 ^export default {8 d. z( M5 i' Y9 u/ E# T. t
  data: function() {) C7 \* Q$ h0 A/ `
    return {
! T, G' a! J9 t6 i, b' t, K* F2 O      List: [],2 F/ c4 [# l  O/ w. g$ C8 B8 P/ B
      inputValue: ""9 P: [$ \7 u8 O4 I; I$ F" M$ B2 k5 u" q
    };5 L1 l9 C3 ]/ s6 x- f
  },, l( j; {" i. d' z$ i
  components: {
& Z/ v/ [( }' }    todoItem
  j5 {, L2 t% U+ W, n; P: k  },
5 q' V7 r  O% p' U0 N, M- F' t  methods: {
! M7 `: k; X$ s5 X    submit: function() {& m  T! f& K: b# r
      if (this.inputValue != "") {
7 R) G8 u, c+ ]3 ?! q, S        this.List.push(this.inputValue);
* c2 g6 E2 y+ a; a3 W      }/ d' O- G; _; j& l
      this.inputValue = "";  N& I% G3 v3 M) V* e
    },
+ D) D  G, Z+ N& \; Q2 h    handleDelete: function(index) {
5 k% o/ |9 f7 i3 y3 M/ E$ j      this.List.splice(index, 1);
/ r6 f: m0 j! _& D7 U0 o0 b    }
; N  x  }% \9 X( S8 p1 P" V! ]. R  }
/ V+ G. Y2 D/ N$ X6 r};- K) h9 M' J7 c' I3 [+ \
</script>
2 W4 T5 c" ~' u$ H( V
! Q) l/ @$ i* }
0 U8 b7 L4 X- A2 Q! ]% c1 E

4 J$ D3 S1 [. N
* L0 g" m7 i: l1 X* y  \5 S1 f+ Z% c. \% B9 v5 s6 ]! S& O2 F$ w

# Y$ J4 B5 H# `% ^  x
7 B: q) v9 z2 G/ X' G<template>+ i6 G- v& N2 Q8 c
  <li @click="deleteItem">{{content}}</li>- Q3 P$ a% Q& {$ O6 u; {
</template>/ b7 ^$ Y& M) z9 L' R8 q

2 o- P* H/ H7 b; H% f<script>6 H% J7 A+ `7 ^" ?4 r1 l0 t& _
export default {; e; q/ W- l$ _0 T9 e7 ~. z
  props: ["content", "index"],
3 F9 L. m  h8 g9 {  data: function() {2 y* ~. ]; q4 b# [. T* o
    return {};' @$ o+ f- G' T+ P. L- j6 ?' ?
  },
% C0 _  F8 @6 @, j% [# @  methods: {5 Q. h6 y% G+ x6 \* z- P4 D
    deleteItem: function() {
; E1 G/ E/ S  p! S2 d( S' x      this.$emit("delete", this.index);
4 f! r# j) ?. q( A3 k$ z5 M5 G& X    }
: m0 I2 u% g1 A* D: X$ G, P  }
$ i2 R5 s/ t4 j) Z1 M! C};
' n) p( E% }5 o, v3 ^</script>
! L# y* U  y# m' J: g  w! A( _9 [' Q$ f  y" Q

$ e8 r3 f, r$ B: d. U1 F/ I
: c1 g0 v  [; u

4 d# Y1 I' u. @: w. g2 g. T
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了