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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
, p& U# I* z- p

+ v; V- F+ u" C4 M: @1 z; H+ G+ P8 |- l
# y2 D2 Y7 u7 H" A& H4 q! J
<template>, [$ z$ e6 i+ J
  <div id="App">+ }1 h" y" H' c+ ~2 i
    <input v-model="inputValue" />
8 `; {3 k' o% f! I5 g3 q$ p; T    <button @click="submit">Submit</button>
7 J  c7 d! O) i2 O! _    <ul>
4 _' {  _3 v3 u5 {7 L  o      <todoItem! O( _8 H( \" n( N* @" \6 f
        v-for="(item,index) in List"1 A! y. ~" X5 L+ D
        :key="index"& N" v% ?  a' N6 `5 o0 z
        :content="item"
% x3 \8 v& H- e; H8 W        :index="index"& P3 R- X/ F, H$ v+ o
        @delete="handleDelete"
% V1 P/ B8 N6 Z' v- Z      ></todoItem>* J+ ?2 n3 g( m
    </ul>8 v0 \3 b( t% `& ]8 E! n
  </div>3 ^% Y/ d4 `5 ]; k
</template>
* P" r+ A; X+ n& p: c: L; {9 z/ E" d1 A/ Z0 M: u
<script>1 a3 {* v7 e: d5 Z- {- @+ J
import todoItem from "@/components/item.vue";
; v+ u* T( W* y& \7 ^1 U; R( b, m  L1 K! `
export default {
8 C+ L' U% l! r, f1 ]/ M  data: function() {
- D/ e: G  p3 B+ |    return {* l( c. v% x0 a+ l7 O
      List: [],
; ?' o0 F1 m  f- K/ ^. ~4 u7 c      inputValue: "", T, l' `) ?* i% x% Z- `
    };' y- s  N/ R; E+ D; Y
  },1 J2 Y% z- \8 Z2 |- w  o: E! J
  components: {
3 ?; s. r! w, L' Z    todoItem
4 a. M9 Y, `! c/ M- X  },: z+ b3 u; M/ O9 A  W9 i+ {% A
  methods: {( T0 b) y0 Y. L% ?1 I
    submit: function() {
: p0 U- w2 k* o5 u, c      if (this.inputValue != "") {
; `/ w; |* F8 C( k( C! b' e5 l. i        this.List.push(this.inputValue);& c9 T* i% B( A/ U; v. \
      }
8 W4 J% \7 j6 D" M' I% u( N      this.inputValue = "";
- Z0 G2 H5 M9 b: C7 @+ P    },/ \8 u0 l. `4 s! d: Z
    handleDelete: function(index) {( v% H$ A/ o3 E/ f8 n
      this.List.splice(index, 1);% V) m, p- a" t0 W4 {
    }( H6 m: W" s; @2 q( Z  p
  }
5 {* G9 X/ I- a8 M4 T/ H) h  j* k% T};
6 C: u; C; O' f2 j( D, Q2 o& X& m! I</script>
3 v5 l0 g5 z0 T8 x% @* s  B$ v2 o, P4 a9 J. z4 t' h  I

' O2 m( j3 E# l8 y# a9 }
- [: ]* a7 Y- I# o2 J0 X* q( U

& Y( J* W5 C. t- M) O9 p4 f. O9 L0 X- g8 T4 `1 D

6 L, ?# C# K9 q0 f* O0 v. R  }" Q& M9 L4 ^  \
<template>
, s8 m( X) V- K" e, x% X* T8 V7 Z  <li @click="deleteItem">{{content}}</li># I' u* W6 H% u* u/ H6 w1 k' h' h4 Z: m
</template>( X$ q  ?" p! \( s1 ~7 N/ p5 h5 s$ w

' M/ h5 O- Z+ ?<script>" w7 z7 Q7 r. ~+ a, V
export default {
4 V2 f5 b1 B8 ~0 i" c8 y: G5 |3 g  props: ["content", "index"],) ~) N9 R7 v3 K  Z4 a0 w
  data: function() {
, s+ G5 C$ D& H" Y    return {};# n9 g0 y6 T7 d' Y- j/ X
  },
3 C' n% T% |2 \0 D/ A  methods: {* W/ i0 j' Z9 G3 m$ ?
    deleteItem: function() {8 d! w# t5 Y7 q4 x2 S
      this.$emit("delete", this.index);# l4 d. g/ F0 e2 `
    }3 d" l. I3 H% ?0 O4 I* J+ W
  }! b$ E; o- L: |3 `6 z
};
1 b6 M* R9 n4 {+ I</script>) {+ k0 m% i- G% j7 Z

1 c1 d+ j$ ~2 r0 ~9 J' X: D! Q  j, e( d5 {5 y! ?) C

  v, T; {5 S) d. G" I1 c2 S' a$ P
# l3 h$ m& H6 o
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了