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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

2 c+ z+ b8 P8 F, V
' v% e* O! O8 E' t+ t# O# p+ b) d2 ?. `# x0 [/ `" a% Y
; R  B$ t0 @! q  s- ?
<template>
0 Z3 q, J; [! C2 `; y) x( s  <div id="App">
5 T( v# l$ W5 |# u9 a    <input v-model="inputValue" />
3 L: {1 T1 [+ m$ q) p    <button @click="submit">Submit</button>4 I* p: ?8 k! ?, y" G
    <ul>
9 S. J+ U. g' @2 D- k. g      <todoItem& H- {3 q9 `) B  d
        v-for="(item,index) in List"
' M8 `0 J8 [  O/ Q! X        :key="index"
+ P2 j3 x0 o) \5 L7 u" u' {, X+ c% ^( j        :content="item"' |8 H* j, T: d6 X
        :index="index"
& _* ^+ [2 Q4 G1 K5 I        @delete="handleDelete"
4 o3 e. W$ Q$ \4 d      ></todoItem>. d# y0 B: u9 N9 `& z, Y) T
    </ul>0 `1 D% C) l& B: x) d' l
  </div>: `! |7 \# m& y& l2 K
</template>/ H; {2 H  r, A# B
# W4 e" R6 S' V: c% ^1 ?* o
<script>2 Z7 r0 Q1 n2 ?$ v: B
import todoItem from "@/components/item.vue";5 E# a2 M( [5 W# G/ M2 K3 N- e
% Y2 h) r& M! n4 o
export default {6 @+ b( ?' y9 f. i
  data: function() {
# \4 H; Z% o9 ^7 I" i) c    return {
" v7 B, @( u" N! Q1 n      List: [],6 D# m% I  A  w1 N, ?/ o6 a
      inputValue: """ `( v7 w) g  Z) c7 v  J4 z
    };% B! O# ]* ~+ a" ^0 d
  },
; u$ t4 J, D7 x: k0 G. N  components: {. e- _3 M2 ^7 o4 g1 i# q& e
    todoItem# K! W$ D0 `/ z. G
  },
% E- Q3 z4 Q2 k  w; s* m& t  methods: {6 |( e, w  z- H5 E, M, i
    submit: function() {
* }/ O3 e8 s2 v      if (this.inputValue != "") {* p3 L! j" s- k' E4 e
        this.List.push(this.inputValue);
8 M! i8 `1 O1 \3 H0 W      }6 G* ?9 H8 u# `6 e  E0 B
      this.inputValue = "";9 L! c) U( [. B8 Y4 s$ [7 `9 D
    }," h8 {- {, w) j# K8 `- M
    handleDelete: function(index) {
7 N) a- e7 y9 [$ k) y% h      this.List.splice(index, 1);: S* I4 ]. y  [! `1 Q% x
    }
$ n" F4 }! z$ K  }5 D( `  X- P/ W" h3 W! r: V& _
};( U9 Z& f6 U4 P. e
</script>, `0 Y+ o. K& K% v9 y& `5 I3 L
8 U. b+ A) f$ ]9 E  `3 _) I' z
; p# i3 {. o9 R! q, i& J
0 n8 y$ ~1 P4 g6 c9 @

1 Z. u" N4 K$ Q# T( g2 |
; g  k/ z: B9 z0 L; H0 {& ?  M
8 ?6 U9 d& G. Y; g, \
<template>
( k$ e1 T8 E# H  <li @click="deleteItem">{{content}}</li>* a; N8 [- j- `/ G" [
</template>5 c& d5 f5 v5 q3 }
( W, J1 B, D9 C
<script>8 ]1 O! j$ i% K
export default {% o* @7 `+ g% F7 c3 m" q$ s
  props: ["content", "index"],
3 q/ p4 _4 q9 {& a3 O- ^# b$ F. E  data: function() {
5 E* o& F6 H1 T3 |, ?0 \: w3 a, p    return {};# c% u& s$ Y& y( m* b
  },
  H4 G0 ~) X# b- c+ y; V  methods: {0 C6 g8 [6 e6 u7 B2 }
    deleteItem: function() {
  W4 T0 [5 d0 y+ O, _  o: ?5 m" Y* x      this.$emit("delete", this.index);
; m- m% k) A2 v# `; [    }
! @; |2 I! h# j! D7 e  }# s' O* E! ?6 F
};
2 J7 O% Z' g( z. W' h( d</script>. z+ L! L* }4 r' T
- `9 u0 ]0 q/ j" y% M" E! }& ~* {

! d" P6 _" a7 I% A  w+ W

& E; y3 H; ]0 F& Z" G

4 {" ~( \0 |) n& M
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了