PLM之家PLMHome-国产软件践行者

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
3 O& Q+ e- C! G5 B

$ r. }1 {" o& Q8 e) |0 T1 |" }) N2 I+ ]1 E8 E" N! l
! A1 B  C* X- [, K, B6 A: L
<template>- B: D1 \' [1 J# e- I
  <div id="App">
% M5 I6 g' t4 v) p* y& p- I9 V& s1 p    <input v-model="inputValue" />! J9 Y( y# ]. m7 X0 E5 o2 ?, h
    <button @click="submit">Submit</button>  f. f$ `9 l9 S( N  y4 J! e" @
    <ul>
; F4 b" |+ W% H9 D      <todoItem% k+ U) f% m( s4 u: H
        v-for="(item,index) in List"8 V9 z! D/ q  v! S9 r+ R
        :key="index"
6 I3 W- X8 q, y9 j8 J% j) L9 O        :content="item"
' T( L3 E0 Z/ B/ R        :index="index"! |0 w$ ?) Y, I# k" R) v
        @delete="handleDelete"% l: B4 Q  y/ A/ R" J
      ></todoItem>! s- h: n9 v0 _$ f( t6 I- b" w
    </ul>
) O  D5 ?2 S0 H/ M5 r  </div>/ o( F1 c9 ^- ?1 T- q
</template>6 ]; Y- c; p$ c: j4 ?  K& j5 f

! ?. s, W# i5 q* Q7 U<script>/ G0 A, m1 O' }
import todoItem from "@/components/item.vue";6 `9 X+ J2 J4 P
; U5 s- Y+ s( h( {/ z6 A" Q
export default {1 s0 I# k/ O! a" b; ^( h  Q
  data: function() {# u, r0 x# P' ]( E  O1 `  a) \
    return {+ a- c! g9 h3 f4 t2 J
      List: [],
, q# u/ W% B  [% n1 g      inputValue: ""3 h; C0 U" H& K! n5 {. |
    };7 S7 L7 `- o$ _' @# ~
  },. T6 U9 W) |8 J" N0 r/ P- G5 j* p
  components: {
3 U1 T! D+ z2 f+ |* b& E/ C4 Y    todoItem
4 I: E- \5 B# c  ]: I- V  },
) |. {( K! j* C/ h* d  methods: {
0 q" I8 k; C6 d    submit: function() {
* r- I% n8 W/ N# j) _      if (this.inputValue != "") {
1 u8 _) M: m; n( o( ~( J        this.List.push(this.inputValue);- m% q8 L! `4 ]0 I$ ?
      }% A8 f! L- D7 M. F# q3 y1 Q; _' k& b, P
      this.inputValue = "";0 \' Z4 H2 }5 J! I
    },
+ k! Q  Q5 J- D% b! [    handleDelete: function(index) {
! N; ?3 t. S0 R2 ]+ F8 C% W/ M* R      this.List.splice(index, 1);( s+ S. G) N3 m* ~3 L
    }
& L% a, k. g- O9 C+ G. g  }
+ j2 r) B/ R$ T* e8 j};
6 c' D8 U* f) }2 r0 }</script>& K5 f# c3 X$ C- \5 R9 N

2 ]. _  {8 W" {1 }( }4 ]. E  U' A  U  y8 l- m. ^, `

/ ]: a" K2 j( E
) H9 O& ~6 `$ w( b( d. \6 A: p2 P5 Z! L. l; ?% x
5 ^1 D8 H0 r7 S* c* ~
& C- O# @1 h# o. B, ?5 Y$ r
<template>; H8 v& o5 t+ v% `2 b( g- r5 \
  <li @click="deleteItem">{{content}}</li>. {2 V6 ?- H- f- c& n' d
</template>
. ]6 w! x% o7 P
$ O0 {4 p+ L; x. N. \: V<script>& g2 ?* Q1 e! d3 V5 L, \' e! e: x
export default {
" k1 K8 K. P5 a/ }  props: ["content", "index"],
1 l- Y/ V8 Z' w# D; t: j  k  data: function() {
; R& M' d$ z# x    return {};
6 F$ V  R! `  ~4 b! R  },
  i9 C5 ?  g$ y- K  methods: {
1 C' O$ z# ]) Q+ [  ?5 I3 g    deleteItem: function() {
1 f8 O; i, }$ X6 n0 r      this.$emit("delete", this.index);- P4 I, {5 G5 L0 ~4 K, a
    }
  q8 L  Y+ H7 y" y  }
$ x  x, u% [- X2 Q: {; {% a};. I; k& c, ^8 ~9 b/ m4 e$ O
</script>0 [8 v6 T- T8 T& R. w4 a5 x# q8 E

2 Y; ^) d5 p% c* I& S% M; U. f9 T' x1 _) F, ^) }: J

$ \8 s" G  s/ ^" V& B! V" t( G
0 n# k( m6 n" k4 i
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了