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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

2 u1 ~. T) C; ^# S# z  {
4 s0 {; `6 T) B: v0 ^8 b) T( N6 ?+ B/ e9 @% y/ E7 q

9 U0 ^# K2 ~6 H6 d<template>
0 d$ z, r7 T) c4 J; `. M$ e  <div id="App">/ _* r7 e/ h8 r7 k' Y$ ^: q! m
    <input v-model="inputValue" />  U! j$ C, ]2 X$ a% G& }: @
    <button @click="submit">Submit</button>
6 Q; U' D0 [; g3 B: K    <ul>
: b% l6 |; O" Y3 E      <todoItem
! l- o; a; j' P& Y        v-for="(item,index) in List"
7 k# {2 |( ^" ^8 p" }        :key="index"5 S3 O. U0 g) m! Z* x( I9 T
        :content="item"% T3 M- L* d; t% X9 k6 b2 |- s
        :index="index"
- Y1 K( {! b7 C$ x! [        @delete="handleDelete"
; f4 R! R# t/ W      ></todoItem>
6 W9 A& Z: r6 K% u, p7 E; n" i' ]    </ul>
  g5 K. W: L- k& s: d  </div>
* I0 j/ \+ M+ E</template>
* d+ d% m0 F( S0 X+ g
  d5 s# v! n) l; C- I<script>. ~2 [! b/ e/ f: K% T1 b4 G! m6 H) z
import todoItem from "@/components/item.vue";
5 V9 C7 u- q6 X9 b$ T( W# ^, z0 n4 d# a3 m- L
export default {
4 t; L  J# H0 O# X8 W) I( @: v/ L- B/ |  data: function() {
  \2 Q8 g. L1 G% J1 t, T2 ~9 v    return {
) Z$ }& }) \  w8 p/ d, O: T      List: [],5 s. L* b7 ]  ~8 K% w' R, Y
      inputValue: ""- r: g4 ]1 k5 h  h
    };+ w1 o8 i; [6 \  n% B$ t
  },
3 w8 B' ~3 X& Q7 F  components: {  i  s% r$ c( c+ s7 Y  Z3 {
    todoItem: w3 \+ w" v& y- d7 a
  },
( J' _# v( z+ A2 h  methods: {
) m6 d' y  r5 |6 X% ~: e1 W    submit: function() {
3 d2 {) t1 m& B      if (this.inputValue != "") {
, q1 o, h& V( t        this.List.push(this.inputValue);0 g. g8 r9 v! E0 @  M3 i, }4 b3 K3 p
      }
( n$ n* e2 X! G      this.inputValue = "";6 ]) \' ]; l$ l8 `( @
    },) o& [! h* ~/ y' {
    handleDelete: function(index) {- B* |( a/ w: V8 T* L& ~5 R' V
      this.List.splice(index, 1);
+ v9 |) i" U' j: U6 E+ t# Q    }
* _/ X. ^/ }; f% A9 B  }( r1 V  I1 q8 H+ u% a9 `
};" k3 H) ]" O# U
</script>/ n  P% `9 u* A- z) H6 a  w) V
7 c+ n# m) \: R9 c, c* @' B
; r' `- V3 M, Q$ j" ?

- Y& s9 V$ ~# b! b2 `0 @6 L- F
/ y6 d6 H6 p1 R6 `4 N
; q6 T6 B0 Q8 w9 A% z' ?( l/ n$ V. C' ?7 ]
; i& [* l" A3 z; H" d. a) ~# K1 s  X" W( w, i, H( ^8 n
<template>
  U6 U4 L2 l0 ~  <li @click="deleteItem">{{content}}</li>
( @8 Y3 U7 U6 |0 e9 u+ v</template>
6 C: C9 Y' w, T2 {9 u5 g$ Z: B: t
<script>. G- @2 v* F& B' f' `/ k7 N1 b5 n+ `
export default {7 {1 H( q& `1 n) J
  props: ["content", "index"],
2 c- [. h9 v% |0 g* n  data: function() {
7 l5 W8 M* d! b! d    return {};
  Q! V1 b6 [! N6 ?  },3 [, x& _: Y: _3 a4 O1 ~
  methods: {% B) g$ Q3 U2 L$ `& `
    deleteItem: function() {
4 D! [+ j2 D; ^: _+ o# ^      this.$emit("delete", this.index);" d3 D3 [1 X! H- S& m1 J# n
    }
( V% ]1 d8 e4 N6 L' T  }/ L4 ^/ _7 p- D
};
# m$ G+ |+ R  X5 @0 M0 x8 S( g/ B0 o6 @</script>3 D9 k$ p' f9 S2 V- y$ F% p1 Z

: N1 K5 O" w2 C$ _- X) g) `4 i2 u5 V0 d6 ^
: ]0 C! ?3 W& v
0 d1 R1 E; F' E% h& D
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了