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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
* D; ]# X6 j% s# a: |
8 E2 p- x1 V. K8 f: e

, K3 V' `) I% J- N$ R, [6 `7 `" g: T- ^8 k5 v6 t
<template>: O6 c8 @2 `/ I6 e0 `1 C  G
  <div id="App">% C+ _% |' C- _7 n
    <input v-model="inputValue" />- F- S% u9 {/ n) q
    <button @click="submit">Submit</button>
. ?5 ~! a* z' P) \- U% t0 i    <ul>( P) h# X  y$ c6 {# X- c
      <todoItem+ q7 _! d! ~- g+ c7 L' O" Q
        v-for="(item,index) in List"
, ~8 D8 k( D, a( n! }" n$ K, a3 f        :key="index"9 h: v  t9 R* E' ^- ^
        :content="item": r" z- s6 ?) G* H+ _
        :index="index"
( @9 V' p$ y8 t6 l9 Y  s! d        @delete="handleDelete"
% y8 z7 {  G3 N0 S4 R9 H8 F; U      ></todoItem>
7 ]: h- a3 n3 z    </ul>
# q  F7 K9 u2 Q( Y9 I  </div>
' G$ _3 T& |( m9 r</template>; Q5 r- ~# ]7 ^2 ]$ Q

2 t3 T( j% W2 P6 O5 u. t3 W, e<script>
; ]) p) x8 m& N: i8 N" k" Rimport todoItem from "@/components/item.vue";
; m" X+ h- j( J7 M* J& e, k  B1 d; h0 t
export default {
1 p/ o" y6 I% l  h( R- N' O4 X; A5 q  data: function() {
4 D- _# {1 r& {( M    return {, d- y/ U# G4 S  C% W1 m2 a& _
      List: [],& T& Q- w% z& a( i; w5 i( X8 |
      inputValue: ""
: `* }* G! c0 g+ X( Z* O9 x- U0 l7 b    };5 L* `! G- d1 H# ~" Z
  },
2 a5 B( T& c  A2 l/ l4 c: X# v2 m  components: {
6 {) Z. u; I" }$ D' v' `    todoItem5 R  [9 B6 [; F$ ]/ Y: w) z7 v
  },! i" z/ O  [: x
  methods: {
, v' N6 v7 ~, e4 F& X: ^* L    submit: function() {
& s# t) _" h# u' `      if (this.inputValue != "") {
1 W$ C/ ?1 m( y) t* b$ b4 [        this.List.push(this.inputValue);
" o% x7 G9 t; B  X) S; O2 S      }
& u/ p0 [# R3 X- G# W8 ]$ r      this.inputValue = "";" _) R7 M2 B  y3 b9 o
    },& |$ U3 o2 q" L$ }: K& V' }5 G
    handleDelete: function(index) {
- O7 {' d+ Q6 j      this.List.splice(index, 1);/ ~4 x6 K6 }2 Y
    }4 m0 e! s0 |5 f" p& h+ |
  }; C) n# W5 j, L- Q
};+ y# i, ?+ H* }  a9 e9 I
</script>  ~, Y( K% F' j4 U

* Y6 A+ M, m# H! T7 R! Y! @
3 V# u( b4 \! l" {; L9 I: u
2 l. Q: [$ b+ R( i" V
- k9 X9 p- J7 W

5 B9 B( w3 `2 K# W: E
4 r5 V/ |! J. U% _1 z+ ~
2 G" }- y# Z7 A. k0 N<template>
5 y- @! ]* \3 M" s. b4 ~# D  <li @click="deleteItem">{{content}}</li>
- L/ ^2 r/ Q' F, A, o+ O5 s/ `</template>
0 d; x! J- B$ b5 l0 a0 s, Q0 ^! D, T3 C* \0 k+ O
<script>
2 w" `6 g/ d% z" aexport default {
0 a: G% J/ m: X' o  props: ["content", "index"],* h" t& [& y+ A% M, W
  data: function() {
# P- f$ q* `  z: {" c    return {};" w& p9 h* O) [
  },
0 i" M. v. L; H  methods: {9 f$ V7 j1 H1 {3 A2 J2 z  ^
    deleteItem: function() {7 J1 t" `# C. R, A/ V
      this.$emit("delete", this.index);5 Y' V8 L' T3 ?  |( {2 p0 t5 |
    }
. m- E1 Y5 [& [: W6 A  }
* O) V/ U6 Z& `9 I  ~! i};
* X) e5 x. Z# r# R0 {# t7 H5 n</script>7 V" F4 ^) ~2 q
! }  z* F4 @& K2 ]- H* H; r2 k

3 l" E( E5 C% _

' @4 {/ _  w" Z7 J' q7 l8 T- ~

: D: B6 T" U5 V) \* \- w
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了