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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
( x- `1 x6 L6 l. {/ n
: A% p1 K! c- e

; J6 s/ d: C" V. L: _
# U& z- c2 j  B9 {1 f7 j2 L& d9 N! w<template>
% j) d9 U) h# V* ~; O' U, f  <div id="App">
1 h6 a, F% ?( D( l/ y8 G# s2 j7 b9 W    <input v-model="inputValue" />, s, U( }9 H- w6 c4 z
    <button @click="submit">Submit</button>
1 b) C) [4 }) o4 h- ^, Z    <ul>; S: O! g% K1 n: R; J
      <todoItem8 E* D+ }6 R7 E/ v' S2 t% O
        v-for="(item,index) in List"
' J" y0 v) D: I2 r' t5 [4 H        :key="index"
, W# Q. [; Y$ K: v, X5 C5 Z: a  [! V        :content="item"
2 s9 c, x  T: }        :index="index"9 P+ m2 Q! K6 Z' R
        @delete="handleDelete"( N' S2 W+ D7 `7 x! L9 W
      ></todoItem>1 t$ j: R4 j+ ]- K2 e" T
    </ul>. o2 }* ]- P+ b9 B( R! q6 U
  </div>2 d  v! _6 j: p8 y" U
</template>) N8 B$ ~1 U; P  O: s! G5 P
# t; ^' ~# ?! s
<script>) B" _8 M, Y: c3 }
import todoItem from "@/components/item.vue";6 c# n1 n% w& t- p6 N
9 W5 q. O0 }5 C8 e0 H  s3 A* @
export default {
1 N7 J6 u5 i. Z; \: d* ^  data: function() {" l+ m9 S- v, V% ]) v0 O
    return {' @% y2 b/ U8 q2 B- \
      List: [],
; @  l( r! s5 a! C4 D      inputValue: ""
; [& \# u2 A  u/ F- t    };; L! F! J% \9 v; G- o$ j' F8 h
  },0 e. k" {) z# m9 S
  components: {+ p' v; V& i$ f& e; i" r
    todoItem! Z9 Q2 Y( [% h0 x5 P
  },9 F. A7 b4 M7 K+ [
  methods: {; {9 ]+ D) @- q( z( ~
    submit: function() {1 N1 m2 n% n! S# f1 |! ]
      if (this.inputValue != "") {
9 }  S! N! o% R+ V: i8 {        this.List.push(this.inputValue);# ]6 u; W- r" f' ?4 k: F
      }; O1 V; D' J0 x+ t# W
      this.inputValue = "";" c. X/ \% x! i2 B2 v; j; z
    },
( B) o- z- n0 b+ s( M8 F    handleDelete: function(index) {
2 z: L$ ]$ v2 n      this.List.splice(index, 1);
& ~$ \+ f1 |, A    }: N8 T2 ]% S# i3 N$ m) ~
  }, p3 `  z/ c( i+ ~
};6 y* |: V' L5 S" E
</script>
8 `& [2 b3 u3 s7 E: r3 }" i( r0 Z8 s- i) l, ?
6 ^7 a( ~, q: a$ ?8 u0 _
; Z  {3 n% p6 e$ D% u2 i

0 ~! L5 o2 q/ b0 k# G
5 r1 N; z/ z& q4 |: y
% |' H+ W4 L5 |3 z4 I* s2 Z8 E1 G: C- o( @6 t& A& a# V
<template>
+ Z: ^8 w/ X6 p' e* d) g  <li @click="deleteItem">{{content}}</li>' y0 h$ t& B) U) Q- C5 j
</template>3 h5 a( K1 Z+ B1 W# h! A4 q

# K* C6 b, [: D- W2 X$ `<script>
% \8 t- V3 G, pexport default {
& }5 {. D: V" M( B% M% g  props: ["content", "index"],) S3 q$ \4 Q( P3 \3 |3 O, L
  data: function() {! D  T0 F% m. q. j4 A
    return {};
: h( F0 _5 Q* `* P+ O3 `+ r+ h% j; b  },
3 f% e5 P, ~- t4 j  methods: {
% N; Q! u  u& A- \( F    deleteItem: function() {) p) I2 P# [' {7 X3 F- r
      this.$emit("delete", this.index);
/ ~" e& ?8 A! H* l; Q! \( A    }
/ Q, B* Z) r. V1 `, E  }
. P2 C- n* {3 ]3 g8 X; N6 o};. x/ ?( T' Z/ w4 A
</script>
: }+ o8 K' R+ `- Z8 g1 U5 S+ y6 a, J+ `% }& V
' A1 L" X8 b8 l, R

! R8 C, v/ i; g( Z0 e+ O2 L/ V+ }
+ M* F( O2 A4 ~9 x1 d3 A- m0 U4 N, D
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了