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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

7 E% J# b+ Z, u# @8 X8 x3 e- S6 f! {" _* j; I' ~6 b

* E  e2 F9 @" R' S7 Q- n' A, w  g. o; X4 S$ v5 S
<template>
8 i# _- W( d" s8 q5 d8 ^  <div id="App">& O6 Z* Z# _5 `- }  l$ U
    <input v-model="inputValue" />" _: Y+ v8 f9 H* \- A
    <button @click="submit">Submit</button>
: t& v) S  C8 J    <ul>4 V$ ~0 a" m  d' w- m6 Q
      <todoItem
$ J0 z  x2 F" k- X; _" `* x8 g        v-for="(item,index) in List"2 h5 |9 @' b- ~: a! c
        :key="index"' l( k/ h, W6 E* t0 |( g
        :content="item"
: Q  D& G. M( F( a, C        :index="index"; J( |3 V4 m/ g- f1 f8 u9 ?
        @delete="handleDelete"
* `0 }5 ~. v! D2 I' y, y      ></todoItem>7 P# T, l" d" i' W1 f
    </ul>
* d7 N" o$ T7 J& v6 h1 s* H  </div>
# E! ?2 C' b! n; a# Z</template>! G  _1 W% h* r  K& o- p* b
% @' x. _2 J' X+ z9 }4 O
<script>3 g( U& t) \  ~$ }
import todoItem from "@/components/item.vue";3 s& c* R! m1 g8 K' P& _) ]( B5 a
% e4 Q' v) s, m  X
export default {
3 ]$ w; y: n" O# P  S' d, T" m  data: function() {
7 M8 G. W9 y% n. E    return {
* D9 [3 i1 \$ U, M! }      List: [],
9 e, {: L) \9 I* N      inputValue: ""# J6 A1 W  l5 D3 \
    };
- M7 m( |, `# P0 K1 c& D1 k  },
0 z. W6 y. D/ a6 D5 |" V  components: {) \" p+ ]9 J! F% ?
    todoItem
' y3 w4 |0 g/ m5 |2 k  },
% R7 o+ g$ ~5 g  I7 c. V# n  methods: {
, T+ ]6 V: b  a& R; ~# |. S    submit: function() {6 E- c# M) m" U; ]+ ?
      if (this.inputValue != "") {1 Z: i! Q& ?* b$ z
        this.List.push(this.inputValue);
2 E& P7 x0 r  I  N! x+ j0 X  O      }9 K1 {7 u" {, i& i  A% k
      this.inputValue = "";8 _8 _/ e' T) ~6 H
    },3 T+ X3 V7 F( j( g
    handleDelete: function(index) {$ a5 Z; f, `7 B
      this.List.splice(index, 1);
* r, f9 H  w6 u$ x    }6 t6 r; h  b) |( }
  }4 A8 s6 L! _( K# f
};
0 E# P  X6 x- R9 \</script>
$ Q6 P- c1 X2 y: Q; l- S/ W7 n1 w% j* X/ c# Z. T6 L$ z; g

6 Q* e+ e5 I- Q4 C. o2 P

( M2 M4 G$ q) {  T# Y6 b1 c
* r" Z+ H" Y: M+ l6 C8 _4 Z% X! H' X$ C5 h

6 h) w9 B9 j; K5 R4 R0 l' q
0 f2 _6 M7 N& ?% f6 G" K' p<template>
& d; g/ F, y5 j/ O. `( o7 d: V/ x8 q  <li @click="deleteItem">{{content}}</li>7 W3 [7 r1 v% `9 ?& Z+ {5 k: G" _
</template>
' S& l* o, L; Y5 h6 L; v/ q' D( ^6 L2 b: O
<script>" `+ c% q& L1 _3 z* b& o* J5 M6 b
export default {- R, `# Q& x' l9 C0 j; R7 z
  props: ["content", "index"],
. i- b% Z# O1 U* }# U  data: function() {* S& N/ V2 b/ L% T( _
    return {};$ v" z4 Z% X* z% Z
  },7 D* }) {5 [; O2 y# K
  methods: {0 c% f. w9 X2 G/ h1 @- q$ W: j: v
    deleteItem: function() {4 e- D  _  C  g3 P
      this.$emit("delete", this.index);! F: O* G* ~( d8 ?; Z# K9 N
    }
1 i2 j" Y- v( `# }. ~  }
3 i6 y" q( |' V$ d9 U6 K6 @};5 a0 E1 Z; D# Q
</script>( r# [$ f+ x; f+ A
# n9 x+ o3 }/ i4 x$ B( I

# w# r$ I: W  K/ [) _! K

/ q, Z. O% S; s4 ^% ^( u: @8 Y" W

  p' ~2 A4 j+ Z2 K7 [
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了