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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
$ I% f: b, p1 f/ p
# [6 W2 ]/ e9 C  k# U8 j8 }0 O$ F
  D+ P7 J9 _9 `

6 L5 {3 C, a  x<template>
3 U) q  r3 r' Z( J! `  W  <div id="App">
% G5 o2 K5 \" K    <input v-model="inputValue" />
0 R1 V+ y/ A. \+ G& b7 S' U    <button @click="submit">Submit</button>
3 Q  p& ^7 Y: e. A+ c    <ul>7 k+ F: ^8 K9 x* c
      <todoItem% _7 t" e/ N- X' ~' E) f2 a! B
        v-for="(item,index) in List"" }+ g5 y) J$ y/ W0 o7 N
        :key="index"! c; }* Z* \( |7 F) C4 j
        :content="item"
. }- e2 K; z$ }; L        :index="index"3 N# `4 h  k7 g& D8 C2 j
        @delete="handleDelete"
* G7 R9 U% r8 a: U* C: v; @  p      ></todoItem>( x: P6 W+ }4 o# K+ Y2 G
    </ul>
9 N# P0 P% }& q0 W6 a$ |! \  </div>. u0 T7 n' O9 v& _) b: S) R8 Z
</template>( t  r; Q/ S$ b' w2 `# J
* t8 z5 e7 D! b$ B9 f  C
<script>  h$ I/ y8 t0 S4 o# V& J
import todoItem from "@/components/item.vue";
8 O) E/ a, C( ~  F/ l  W# H2 y/ ~- U# |1 O  E" L
export default {0 o0 z5 a7 e* w; x9 q+ [
  data: function() {- `/ J; P7 X- d3 u7 h# y
    return {4 C# S) P* e; Q& \7 j2 G
      List: [],1 W/ R& t; c, j% _: x6 X4 c- v3 Q
      inputValue: """ e5 @: \! `( p
    };: r6 `: Q7 A$ T& d# }4 R1 c
  },8 G8 E5 F6 s+ M
  components: {
6 a" l. o/ Y9 f/ _    todoItem5 B; m8 `5 x2 c& K: |, x
  },
3 x+ Q/ i* V+ t1 q  methods: {
/ _* h3 j- i9 Y2 g, a( P: L    submit: function() {' Z+ `6 n7 s% k+ d% ?4 W
      if (this.inputValue != "") {
1 v4 u  [: j& K3 M& L' C: g        this.List.push(this.inputValue);
( p& C9 G5 d' M& @3 V/ s2 P      }
# I5 Z/ G  X) N5 Y7 c      this.inputValue = "";# }) V# y. t7 h# F4 e
    },
2 J$ B" H: P1 ^$ j. B0 t    handleDelete: function(index) {7 l! a/ u5 c; h7 k# j) t+ u
      this.List.splice(index, 1);
% V6 [2 ^3 H" t  |$ c# l# e    }+ q. X; ]0 Y' |# T- N
  }
  q  ]3 F1 w( ~2 U& Q' L* U};, |, f3 h% E$ r! K2 W: R8 P. R
</script>& `9 A; U( I) Z

7 r' s% g! p& V) s# `6 K% G
; k2 N! J; N; G1 |8 F

; D" @% J2 H# o% }* {1 K+ W' G/ w# S, Y& N1 q. O
2 r) N; X: r' B0 Z& o
8 }: d; x  x' U& w, q0 _
/ G" F. H4 }( U
<template>
- a1 Y" z2 V  v$ a$ v  <li @click="deleteItem">{{content}}</li>
* e6 B+ p, p; e& |</template>3 E) i3 f* v; ?2 J  R) Z

) m5 {) M) U5 L6 }& E) [<script>' @- R, v5 L' \) q& z; ~
export default {
- ]) G- A# h- u$ d7 C( Y) z1 V5 ^  props: ["content", "index"],% N. {4 o& ^* F& X2 B$ q. c5 Q
  data: function() {
+ C7 g, K6 ^5 C' u    return {};
: ?4 C3 K$ b+ G, C6 A" d5 e( u  },
' X' _5 e# J: a" ]( U  methods: {
1 h0 O% @5 k/ p" a; `* L* P    deleteItem: function() {
/ C/ G& i) i" q; v4 n& w- M+ X3 h      this.$emit("delete", this.index);
# s- N6 S3 D3 I) R' P5 k    }( I, E4 U5 F7 e. x
  }
+ m- d6 S5 [9 _};$ X' \2 @: H% s% H2 L
</script>
$ \2 w1 f- M' k0 V% q0 p. @% w5 j+ o6 |
# q: N2 @; {) K, H

4 _- n+ v$ n  i9 }  y2 x! n
2 m4 y' C- g4 B# u9 ~5 P
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了