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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
0 g; O' O8 @: l5 ^( H1 r$ V
8 U: T2 N7 T: H9 b  ^* n9 {! [+ H
6 ?% \* ?& A" I$ j7 M  ~
$ j- N7 j- f" q" f5 e1 ]1 y
<template>& u3 u/ r  T( V( `2 t7 e
  <div id="App">3 L$ d+ P5 G) ~* v# \; `: D
    <input v-model="inputValue" />
2 I/ r" f, u* T) P) _6 }6 _& c% v    <button @click="submit">Submit</button>
2 I. ~/ m5 J; n' P* |4 g- O' Z    <ul>
; `8 P$ `# E" a* k* ?; t+ P  H      <todoItem
8 N2 s% T. @: C; O! J4 n$ R" _        v-for="(item,index) in List"
% Z' e: E* Z( D3 T2 [, x        :key="index"
# u: |. P# u% C( F8 x7 ~1 p1 ^        :content="item"
: o# B5 L8 E1 V        :index="index"
2 Y% a6 X7 `! o3 f        @delete="handleDelete"* p  o. g8 C% c. z5 E% s) t
      ></todoItem>: v/ [! x; X. A. t4 U2 V
    </ul>* u1 }- ~+ m! d# ], z6 e
  </div>8 @  S& }8 K% n/ K9 F
</template>1 |. y. n7 E! r

8 C( i5 I; {2 G, b<script>6 r4 ^. n/ F! c
import todoItem from "@/components/item.vue";5 |8 j* I# Z9 y( `2 |

( U& C3 s% u0 _# f; W& ^( Y& ~; uexport default {
2 Z, Y, j: K+ K. M$ p+ Z0 i  data: function() {
4 c, J; ]8 {. z# c+ E    return {% Z+ t/ C6 |& H
      List: [],, r5 i6 F7 B# e  r
      inputValue: ""4 x: V9 m2 l$ i7 n+ [* P
    };
1 I: i! N  V  v/ B. o& u" M  },4 A) r, w1 o3 i) E
  components: {
  X' X' q0 T% W" P' L    todoItem: c& C6 a- z' U! V
  },1 @: j9 |# X  Z5 e. C
  methods: {
/ F1 \7 @8 c! V' w    submit: function() {
: Y5 ~, e+ @7 B7 V      if (this.inputValue != "") {+ A( f1 n" r" v0 y& B2 W
        this.List.push(this.inputValue);
+ X8 v! ?3 ?# U( E4 c+ x3 N      }- v6 w3 S2 X; x1 P4 v, v6 p
      this.inputValue = "";. ^$ }5 p# {1 L" T2 b
    },
" S) r& o9 U2 Q2 X% h    handleDelete: function(index) {& `) P# V6 ~' R1 r; D
      this.List.splice(index, 1);0 @) |+ p& K8 m( [# \2 [
    }
. u! r( |) n0 p' a  }: u% W7 x& ~& k% g* f' D2 }4 j
};
$ f  h* p5 f( ]: F, B5 S! m</script>
* g3 l! a( W3 v* K) ~& p& g
% G1 t. Z5 @6 r( D# `8 R7 T; p6 Q" x' C
: m% s9 A" M2 [9 A: i5 v
2 s; n7 r$ V' z3 Q  {8 d' E

' l; ?. S; T: _' W
7 Y+ B  Q0 O* i, T. E. u6 e
. u% D4 F6 }* v* E% ~  @  w! N+ ~( \- Z& @3 @
<template>
2 K3 c$ U; i0 {! j4 M! ~  <li @click="deleteItem">{{content}}</li>
% z* h( d: e4 j& d( ]. i</template>0 f* {0 R0 W2 H1 B
8 z, q/ ?/ n9 M1 L
<script>
; R! G1 g" U! Y2 D7 e2 wexport default {3 ^8 P. B& g9 P/ ^# r
  props: ["content", "index"],) N1 X% I4 f6 y
  data: function() {
5 h, ?4 C' z/ U2 {" K/ j    return {};+ U. y: p) y) G* M+ {3 ?; U+ q
  },% |4 n9 @: L1 U* N0 X
  methods: {
1 T$ a$ m, D+ J    deleteItem: function() {
+ @0 d( }5 q" z/ X" ^, w      this.$emit("delete", this.index);3 P9 \: b  O! h/ g) @
    }. H; F$ }7 Z' C4 z( {; U
  }. A' A! a# x0 _9 F2 W7 O
};6 U$ \1 m0 p" u5 D+ ]$ `+ t" g6 q
</script>
6 i6 Z5 D" w& P# {: F. T! A9 ]7 t- I
" Q$ r; O- _3 V) r4 W9 T8 F6 n/ |

2 y: I. F+ A* F3 B$ L" P
3 i9 V0 _; ^* A* 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二次开发专题模块培训报名开始啦

    我知道了