PLM之家精品课程培训,联系电话:18301858168 QQ: 939801026

  • NX二次开培训

    NX二次开培训

    适合初级入门或想深入了解二次开发的工程师,本培训结合ufun,NXOpen C++,大量的实例及官方内部的开发技术对于老鸟也值得借鉴!.

    NX CAM二次开发培训报名 NX二次开发基础培训报名
  • PLM之家Catia CAA二次开发培训

    Catia二次开发培训

    Catia二次开发的市场大,这方面开发人才少,难度大。所以只要你掌握了开发,那么潜力巨大,随着时间的积累,你必将有所用武之地!

  • PLM之Teamcenter最佳学习方案

    Teamcenter培训

    用户应用基础培训,管理员基础培训,管理员高级培训,二次开发培训应有尽有,只要你感兴趣肯学习,专业多年经验大师级打造!

  • PLM之Tecnomatix制造领域培训

    Tecnomatix培训

    想了解制造领域数字化吗?想了解工厂,生产线设计吗?数字化双胞胎,工业4.0吗?我们的课程虚位以待!

PLM之家PLMHome-国产软件践行者

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
4 h" M/ m8 T% t

1 Z* ~# i( e# _. s, x/ |  _% Q5 z7 s+ r8 f

5 u5 S$ ?# Z: L, e/ Y<template>
( L: Y( P* j( W  <div id="App">
6 H& f! V, W! U6 N# |9 @1 x% l- E    <input v-model="inputValue" />
7 o: r7 q# v& ~- u7 |    <button @click="submit">Submit</button>
6 }& q5 `2 A, Y! C' G    <ul>2 H8 i- H' v" _3 K& U
      <todoItem
/ J  _/ F% X& g1 C        v-for="(item,index) in List"
& {% z( g% I, g% H        :key="index"0 R3 q7 ]* m4 X. T2 |, d3 H
        :content="item"0 z$ z# q. m' k7 Z9 c
        :index="index"
  r/ O+ C% @6 ?, d        @delete="handleDelete"
$ |. U  O* T; d# m      ></todoItem>
+ x7 J3 o7 ], W    </ul>
* v, S/ U5 ^/ G( x  </div>0 {$ s- j) \+ k0 o7 r$ B. y
</template>2 [2 q; U$ G5 s1 z$ @

  S, J9 Q6 U; a<script>
+ }( T; A/ H- C0 O* X# ~3 Cimport todoItem from "@/components/item.vue";$ m+ ^+ c: S% p
; F9 u3 ~! U0 w7 F# q
export default {2 g6 S( \& Y; J3 x. `8 e
  data: function() {
9 i6 x) u% f7 n    return {
  E1 S  y6 ?- N; E! \      List: [],/ S: L: A6 y; ]; Y2 }
      inputValue: ""
6 M; j- \' t- l/ M+ p    };
( U% O9 r, G5 n  A8 Q' W3 d9 J  },
. P7 }# N4 N- [1 [4 }7 F  components: {
/ ]! t) s- H- A1 `- h& s    todoItem
8 V: q) P7 E$ _3 B$ r+ b  },/ f5 m) U+ O& ~5 W2 m5 T8 B& M2 J
  methods: {9 L; S$ q7 ^( G  T
    submit: function() {
9 r0 p: n9 O: X5 e      if (this.inputValue != "") {
& @8 b8 p" x0 I" l4 S9 n        this.List.push(this.inputValue);( F  t8 s6 T% W% L
      }
- S6 G3 L3 @$ e; y4 T0 N7 _      this.inputValue = "";9 N; O) a! e$ [" e4 }
    },8 s) ?+ |2 ~5 X$ y& R9 F
    handleDelete: function(index) {
& Q& b  ]$ q# |! \      this.List.splice(index, 1);. C9 E5 w2 k. a3 W* h
    }& T) O8 P. F6 L" {6 X
  }
3 {4 V" s! F/ r$ c9 n};. [  P5 Z& h- Z' c! e4 N5 l8 q
</script>
# G% z  ^& ]. H: G
3 L8 w  h# J0 ~: v9 }$ z' ^, V2 m* ]; f" b' p) [: U
6 d# T# k* `+ D8 \( L
$ h1 u  z  _5 h# q" z" v& T# ?

; e& b3 \% Q& A5 [  l0 a9 `
3 n  L) X* B2 H3 c8 `6 y& @, U- p! {4 ]" ^$ c/ x' }% {
<template>* E1 {9 f2 }0 u+ e: F) j1 e* t- i. U6 e% d
  <li @click="deleteItem">{{content}}</li>
0 U, V- U0 I# p5 w+ N# H6 a7 Z+ H: i</template>
: E& w# a/ c0 m8 o0 ~
" a/ q% Y3 T3 d, i/ }<script>! ~& h0 J5 J! H" A
export default {8 A! n( O' m1 _$ {% j
  props: ["content", "index"],
7 W+ n" X4 H$ F4 {2 X  T  data: function() {
! f, a! W" ~3 Q3 [$ u    return {};5 ?! V, k! ^- g- x# X/ P. V
  },
( @- R8 ~/ |' @  methods: {
7 _: x% l9 `  W( P: T    deleteItem: function() {
# c6 h$ \6 H% }, s, ^* r      this.$emit("delete", this.index);
( ]( M' z2 D" i$ ?; B    }
7 t+ }% y; T$ }- u4 X( l: T  }- b2 I- b& i! u. X: K/ V0 c( q) F
};
% E- E) r' T. L</script>
. r: F  r5 V, P; c
1 F6 B; g2 P' f7 O& n+ p) I0 N/ u# e) a% t+ O* G

; q* e2 A% ]# }  q% P5 y- T; M
* u; f' ?+ r) o- }3 S: a8 `
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了