查看: 2235|回复: 0

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

6 主题	4 回帖	60 积分

管理员

积分: 60

发消息

发表于 2019-8-8 17:24:11 | 显示全部楼层 |阅读模式

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

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

×

<template>
  <div id="App">
<input v-model="inputValue" />
<button @click="submit">Submit</button>
<ul>
   <todoItem
      v-for="(item,index) in List"
      :key="index"
      :content="item"
      :index="index"
      @delete="handleDelete"
   ></todoItem>
</ul>
  </div>
</template>

<script>
import todoItem from "@/components/item.vue";

export default {
  data: function() {
return {
   List: [],
   inputValue: ""
};
  },
  components: {
todoItem
  },
  methods: {
submit: function() {
   if (this.inputValue != "") {
      this.List.push(this.inputValue);
   }
   this.inputValue = "";
},
handleDelete: function(index) {
   this.List.splice(index, 1);
}
  }
};
</script>

<template>
  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
  props: ["content", "index"],
  data: function() {
return {};
  },
  methods: {
deleteItem: function() {
   this.$emit("delete", this.index);
}
  }
};
</script>

上海点团信息科技有限公司，承接UG NX，CATIA，CREO，Solidworks 等CAx软件，Teamcenter，3D Experience等PLM软件，工业4.0数字化软件的实施\二次开发\培训相关业务，详情QQ 939801026 Tel 18301858168 网址 www.doteam.tech

使用道具举报

返回列表发新帖