PLM之家PLMHome

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

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

[复制链接]
admin 发表于 2019-8-8 17:24:11 |阅读模式

admin 楼主

2019-8-8 17:24:11

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

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

x
* K- }. S2 v( F# U8 f; s5 }* Z

/ w: e+ R4 s: z: u7 l9 Y, \. D- N/ m% J- [8 p7 `" Y/ a

& H6 A' b- p; N<template>% Z* o+ \+ i; C
  <div id="App">9 n1 Z& _+ b$ q8 X1 f" n
    <input v-model="inputValue" />6 u6 Y& w4 O' K- C
    <button @click="submit">Submit</button>
1 u& H; _: K- j& c, a/ g  F( V    <ul># h5 ^6 @) ]+ O$ \& ~' n% G8 {7 {
      <todoItem
, U; y, u% a5 g        v-for="(item,index) in List"
' {6 t: |. B2 i5 Z! @' j  c        :key="index"0 |4 u. s0 b* C
        :content="item". T3 h4 V& u- @2 z* ?; f& b' e
        :index="index", i* f" l# x8 L' g8 h
        @delete="handleDelete"; J$ q! {% C3 M- O
      ></todoItem>3 F8 }, w! t/ f1 ~
    </ul>
  p: Q- B* c/ |, c& X" n  </div>
: l" b( ]! S, K9 b7 U: n  X. r</template>0 M7 S3 Q0 g( ?6 B/ h8 X

- T/ t" ~" X$ ]<script>% O" Y0 h7 c5 T: }, u  e
import todoItem from "@/components/item.vue";
: z$ v' U/ a' ~8 D9 X/ Y; K! T# [. R
export default {
, M$ {/ q4 E7 J8 ]  data: function() {
) R- w5 t! E+ G* Y" g    return {
; I, `' y7 T! k4 ^) v# ^      List: [],
% \* n. \2 }" p      inputValue: ""; y4 p# U) o( Z  g8 y( n
    };
. H+ D5 l3 [% S- E+ ]  },9 x" B3 m) @1 k' ^
  components: {! y4 c- U. X+ t3 X
    todoItem$ l+ ]  T1 n* ~7 {
  },; p- J3 `& ?5 f; B
  methods: {) k6 P) d+ f& V+ p# q
    submit: function() {
; g- O4 B# T7 }# y      if (this.inputValue != "") {. z0 L' y" @1 Z7 ~! `
        this.List.push(this.inputValue);& ]+ a" `5 C% W: c9 p! C
      }
' H4 h! D" ?) V) H1 O0 |4 A9 H      this.inputValue = "";
! k; J4 E3 g4 t    },
- ^6 F! A* o  V3 V, J3 s7 @( N    handleDelete: function(index) {
0 e0 p* y( {9 J% y      this.List.splice(index, 1);' Z8 v1 [; Q4 Y- s4 ^
    }
5 s/ F* D0 c0 I: D  }
  u/ J0 `, A7 l9 I) H' }5 J};/ U4 o0 }1 H, p, y+ j; K
</script>
/ }% z8 Q0 V) B" x
7 p7 }; V' z! d  h
0 H4 M8 n( v" l8 G4 @3 V9 @) e9 y

- f! F" i9 T3 e/ Z5 m3 i& f" X' W' O  o
/ \5 g7 @, ?5 a, e; |
& v2 }! W% H1 Q! O4 [* P  Q
: T1 v9 Q4 Y9 x
<template>
. V" n' ]+ V0 h4 J2 M7 d0 N  <li @click="deleteItem">{{content}}</li>
2 j- R+ I  s, A. I</template>' D- m+ C1 a6 w2 o2 n- H, ?& Z

" K% b' J) g, [# @<script>  H$ P1 V, @- I
export default {
5 t) S5 m( D0 j3 y  props: ["content", "index"]," D2 I" b# V1 z  [
  data: function() {+ b9 L+ g: @! V) R3 C
    return {};: S' M( f1 i/ X5 Y! X- S9 I
  },
0 q' W# P5 q' ~7 s% ^3 ~  methods: {
2 q+ k! b; t" a5 b3 d    deleteItem: function() {5 T& ?3 a* y' u
      this.$emit("delete", this.index);
1 o* M& b/ r# g: _4 |0 [& U' q    }
4 l# }2 ]: T# q# ]3 D  }2 q- P: j. _! D. c' r; q( ]
};/ _6 m8 L+ Y* V, b- H
</script>8 X- g* B! {% }( N
9 f, o2 Q3 {' O) K1 S6 V7 [8 Z

# M4 B9 [- e0 n; F
0 A+ R* F) L) Z* R2 G4 e* F2 G

3 _0 Q1 B/ `) P1 c& \* X
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

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

返回列表 本版积分规则

用户组 : 管理员
邮   箱 :xduniverse@qq.com
手   机 :VIP用户可查看[申请]
Q   Q : 点击这里给我发消息
性别 : 就不告诉你
主页 :http://www.plmhome.com
个人介绍 :原西门子NX高级教务员,10多年NX培训,开发咨询,Teamcenter培训实施等

主题2237

帖子3470

积分65899

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 6 实现打开PLM之家

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 5 创建Tecnomatix

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 4 设置图标效果如

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 3 第一个hello plm

  • 官方文档,NX12 使用

    官方文档,NX12 使用 Python进行二次开发相关配

  • 关闭

    站长推荐上一条 /1 下一条

  • 发布新帖
  • 在线客服1
  • 在线客服2
  • 微信
  • 客户端
  • 返回顶部