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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

! ~5 M! n3 d7 N3 a1 Q) I7 C  x3 X) l9 Y3 L  \) Q

# {* S# F% U4 N! Q3 l8 d. ?0 P
# U* O: |0 y( h# K<template>
6 F& p+ a, n! x9 h# _) t  <div id="App">
5 _/ @1 B  v2 o1 b$ ^0 r' S    <input v-model="inputValue" />
. w  @' ^" J4 n! @5 C    <button @click="submit">Submit</button>* S6 W8 W6 a" W1 y8 t- r' A
    <ul>
, S5 Z, v& f  d2 r* Q      <todoItem" f4 _# m8 t2 v$ @  `: k: \  ~$ g% k
        v-for="(item,index) in List"% P) ]' u- r) c; y
        :key="index"
9 y! w! S, R) Y/ M9 Y! w% P* `        :content="item"8 r& S8 A: d4 R# u6 H
        :index="index"# h+ t& q2 `9 Y7 t, H1 i8 T
        @delete="handleDelete"
7 O: g  V( [2 B( D. X/ e% }# g      ></todoItem>; P; V' W8 t& H. g. c0 @+ s5 d5 ^4 B
    </ul>$ s2 K' A) a! t) {
  </div>
8 e8 u7 f- g8 e% |6 R</template>4 o' T( q  Q# d( _
  q9 Y4 W8 D7 ]: D9 K
<script>! C+ g9 c/ W0 ~* I( T! q/ k/ a" Q
import todoItem from "@/components/item.vue";
! \9 K8 Y/ I* L% ]9 l3 g& P+ j% N! ^) e# h
export default {
  a6 j/ R1 l( e" l/ ^0 ?' @! ^  data: function() {
8 D" t# L4 |9 ?, s* D3 N6 W- \2 v    return {; y( s- n1 n9 ]- Z( O7 |9 L' x
      List: [],: {( _2 o2 h& m2 {' F# d
      inputValue: ""
! ^* \3 b% e: C  Q- ]0 z    };+ M- f5 Z" K+ l
  },
6 c* y" f4 R) c5 }" O  components: {& ^# J  a4 x+ \) o$ G
    todoItem
+ M$ [0 ^: x. U) i" a1 a  },5 C/ ?% d- g7 P* M9 d; o
  methods: {! _3 w+ O4 F" C9 n1 W1 l& O
    submit: function() {1 g3 K+ q* c2 B
      if (this.inputValue != "") {
. X- h7 R. ?" C9 F7 f; z        this.List.push(this.inputValue);2 ?, D; H* R5 ~5 [/ @
      }
7 n4 G. }/ w( H# l* T      this.inputValue = "";) @: x. Y2 X/ G
    },# v* g* q  B8 T8 V6 F& S
    handleDelete: function(index) {
7 N2 a( w( i' t, n% z6 w      this.List.splice(index, 1);
( U1 m$ Z+ H# Q7 Y! z) y    }% f% B- W/ f9 {+ E; x; b
  }* ]- `( f! o! `2 \5 k' d
};
% {% m; a/ W( b! ~) C</script>) \! l0 s) t! F/ o# p
, ~9 |% r$ n: d/ P# K+ @+ d
/ S# E5 C" z8 b( C" L9 }

) ]! `. U: H* Y6 v* i7 h) O$ x$ ]0 V& K

7 D2 }/ e' f& l8 K+ W! u& K* w# ~, s
6 l) ]/ g$ G* ^/ c1 C
<template>: Z/ ~7 D) t4 q5 r& ^! S9 @0 f
  <li @click="deleteItem">{{content}}</li>
' I6 x7 D! |$ W1 F</template>' ~. f6 d. u( c  t. g# Q' [
' k4 q& s$ Z7 u; n1 T
<script>4 k6 v7 |- O& h' H
export default {
) m0 j% }, K! E/ C! ]6 m* N  props: ["content", "index"],
2 f% A  Q$ J4 S1 ^' ^9 M8 m1 j  data: function() {
% z" I+ r! S" b5 g9 K    return {};# t. Y' e! z3 T: T4 A
  },
) `- v5 q0 {; t2 M- f  methods: {
& g: r0 b. ?* I$ I: _& w0 T" _    deleteItem: function() {  j" T, ?! S9 G8 Z/ q& @
      this.$emit("delete", this.index);7 m7 L1 M* a1 R+ q: v( w7 m
    }
. z6 t( [8 p7 \& T" j  }' @& Z1 S0 d9 E: X1 @( U
};8 H; G( P! i, `8 \4 x0 J
</script>
" f( ]  ~6 u; b/ U" R4 g" ?- i0 M4 w) l

2 C2 Q$ s  t, u4 k& B, l
% W) d2 t8 O4 F& {3 w
# f2 |7 P' ~3 ^7 |$ r( n
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了