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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
, n& u5 `  I4 Y3 b' |5 E

  c0 d. I. m2 L5 l9 }5 ]8 n7 h& z+ s2 ^" t

' L' Z1 G, ?+ S) P<template>  ?$ |# p2 W0 f
  <div id="App">% q2 t7 h! H/ H2 }8 |' P! a
    <input v-model="inputValue" />3 V' \8 ~( B" i3 k+ U  P
    <button @click="submit">Submit</button>  ?$ i! H$ F4 S
    <ul>7 w3 N3 C- `/ F: k
      <todoItem" F  P9 G# C6 y+ V" j9 D
        v-for="(item,index) in List"4 I! w& `8 T0 O- h" Y  E
        :key="index"
9 |* H* g, A7 W- t* c# ]        :content="item"1 A, G% T# _' j: M( A6 P/ ^
        :index="index"
; N; l2 B$ x6 R! M9 P2 a4 l! s        @delete="handleDelete"
, I6 y1 l$ U' c" m- d: q8 f5 S0 k      ></todoItem>- f2 J" i2 j( f5 _) l
    </ul>
3 u2 O& u; I2 k$ D) I  </div>
5 o. b3 Q0 \/ f' j! K! |9 k/ D</template>2 E2 r1 s5 ^7 j/ }* V
) L1 {- H/ C. s. {9 X
<script>6 w0 _7 K( M/ z# e8 _% U$ \
import todoItem from "@/components/item.vue";
/ r1 u- [: P& n& ?  f- \  n
" k8 Y  @, D2 A; F5 Lexport default {
  G6 Q- J" @' y5 X( y  data: function() {
- q6 P* M4 ?, G( f& o8 v    return {
+ y7 p, A7 a. i" d, ]  ]      List: [],! ^9 i) k% z) J3 y' b7 N$ y% Q& i; W  k
      inputValue: ""$ V/ o. u- ?' f7 c
    };
9 _/ h& I! D, ?' f3 Q  a  N  },% V" {/ G7 |- z2 _) L$ X3 h
  components: {9 u5 F2 f; W- Y% V
    todoItem1 z) ~: {# j+ Y, ]
  },2 z# @" z' ?+ ]! l
  methods: {9 }; C# B8 I; C0 v, ~, N  E6 Y. t
    submit: function() {0 X8 |! k  g. g1 }
      if (this.inputValue != "") {
# C* K2 _8 t( H        this.List.push(this.inputValue);
) f; @( c" u# _4 N1 R      }! `+ s8 s( P) s# m
      this.inputValue = "";
3 t: ]5 o- }1 H+ ^0 o2 s6 U  m5 h+ m    },, A0 y8 h" k: w9 M
    handleDelete: function(index) {& @- R6 C, T- k! O- ~& G8 H2 i, e
      this.List.splice(index, 1);
- b3 U+ Z3 W' _7 s    }
0 p1 Z, S9 G6 I1 g& O  }2 \" i: r( o2 w+ {$ |) a
};2 C) [$ r/ e# n
</script>
( O; N8 n( ?- w% i, \' E( r% d; W: j. v

6 E3 y5 q+ m: Q7 |2 }4 Q6 C$ G0 P$ }; [

7 U  i5 A' d  t1 D4 Y
4 A( i4 \+ A; u0 ^4 q' M" B& L, p& B  c& {5 ^- I8 d9 v

) K4 b, B6 c+ r& o% |8 ^' C3 K
9 b# @" H) C4 K2 S8 `) g: o7 X( g<template>
& T0 u- d! M# P/ L  <li @click="deleteItem">{{content}}</li>
) x/ H. Y& B9 N</template>
+ P/ }+ N* }( o( x1 r. n2 L0 [
' s" _+ Y1 @0 x<script>% d- x2 J* g( z2 e& p% a' y
export default {1 Q2 P2 P. ^( j' i0 _- z
  props: ["content", "index"],
$ p9 @8 ~5 O. Q  data: function() {) x: l% Z* \6 f7 C
    return {};
7 B1 ?, [  \" M5 o# Z% c" M6 T  },9 o5 l5 }/ E' r, p
  methods: {
( Y. Z- l2 b+ `/ o+ n- N; T- y8 M2 c    deleteItem: function() {* q2 x5 ]- f& Q7 ^1 f) C; z$ j
      this.$emit("delete", this.index);& I& R. A" L: [9 b" S
    }) F# k) Q. ?5 A+ j, Y6 d
  }
# n5 u# B$ H$ ^};
2 T9 V, m. B  Y</script>' }  \) a1 n3 X5 e

' q3 P: v: {7 `$ C$ d1 E* s6 W0 x1 I8 J7 P* I: F; R) {

1 S1 O& r' ?# T% I$ d

3 |+ p! ]% Z# b$ 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二次开发专题模块培训报名开始啦

    我知道了