简单的vue增删改查

【代码】简单的vue增删改查。
摘要由CSDN通过智能技术生成

1.主页面内容:

<template>
  <div>
    <div class="btn-box">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row, scope.$index)"
            >修改</el-button
          >
          <el-button type="text" @click="del(scope.row, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <operation-dialog ref="operaDialog" />
  </div>
</template>

<script>
import OperationDialog from "../components/HelloWorld.vue";
export default {
  components: { OperationDialog },
  data() {
    return {
      tableData: [],
    };
  
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我可以为您提供一个简单Vue增删改查实现的例子。在这个例子中,我们将使用Vue.js、Axios和JSONPlaceholder API来实现。 首先,我们需要在Vue应用程序中引入Axios和JSONPlaceholder API。我们可以在Vue的main.js文件中这样做: ```javascript import Vue from 'vue' import App from './App.vue' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$http = axios new Vue({ render: h => h(App), }).$mount('#app') ``` 接下来,我们需要创建一个组件来显示我们的数据列表,并实现增删改查功能。我们可以在组件的template标签中这样做: ```html <template> <div> <h2>My Data List</h2> <table> <thead> <tr> <th>ID</th> <th>Title</th> <th>Body</th> <th></th> </tr> </thead> <tbody> <tr v-for="data in dataList" :key="data.id"> <td>{{ data.id }}</td> <td>{{ data.title }}</td> <td>{{ data.body }}</td> <td> <button @click="edit(data)">Edit</button> <button @click="remove(data.id)">Delete</button> </td> </tr> </tbody> </table> <h2>Add Data</h2> <form @submit.prevent="add"> <div> <label for="title">Title:</label> <input type="text" id="title" v-model="newData.title"> </div> <div> <label for="body">Body:</label> <input type="text" id="body" v-model="newData.body"> </div> <div> <button type="submit">Add Data</button> </div> </form> <h2>Edit Data</h2> <form @submit.prevent="update"> <div> <label for="title">Title:</label> <input type="text" id="title" v-model="selectedData.title"> </div> <div> <label for="body">Body:</label> <input type="text" id="body" v-model="selectedData.body"> </div> <div> <button type="submit">Update Data</button> </div> </form> </div> </template> ``` 在这个模板中,我们显示了一个数据列表,并为每个数据项提供了一个编辑和删除按钮。我们还添加了一个表单来添加新的数据和编辑现有的数据。 接下来,我们需要在Vue组件中实现这些方法。我们可以在组件的<script>标签中实现这些方法: ```javascript <script> export default { data() { return { dataList: [], newData: { title: '', body: '' }, selectedData: { id: '', title: '', body: '' } } }, mounted() { this.loadData() }, methods: { loadData() { this.$http.get('https://jsonplaceholder.typicode.com/posts') .then(response => { this.dataList = response.data }) .catch(error => { console.log(error) }) }, add() { this.$http.post('https://jsonplaceholder.typicode.com/posts', this.newData) .then(response => { this.loadData() this.newData.title = '' this.newData.body = '' }) .catch(error => { console.log(error) }) }, edit(data) { this.selectedData.id = data.id this.selectedData.title = data.title this.selectedData.body = data.body }, update() { this.$http.put(`https://jsonplaceholder.typicode.com/posts/${this.selectedData.id}`, this.selectedData) .then(response => { this.loadData() this.selectedData.id = '' this.selectedData.title = '' this.selectedData.body = '' }) .catch(error => { console.log(error) }) }, remove(id) { this.$http.delete(`https://jsonplaceholder.typicode.com/posts/${id}`) .then(response => { this.loadData() }) .catch(error => { console.log(error) }) } } } </script> ``` 在这个Vue组件中,我们定义了一个dataList数组来存储从JSONPlaceholder API中获取的数据。我们还定义了一个newData对象来存储新添加的数据,以及一个selectedData对象来存储我们要编辑的数据。 我们使用mounted生命周期钩子来在组件加载时加载数据。我们还定义了四个方法:loadData用于加载数据,add用于添加新数据,edit用于编辑现有数据,remove用于删除数据。 现在,我们完成了Vue增删改查简单实现。您可以使用这个例子来了解如何使用Vue.js、Axios和JSONPlaceholder API来实现增删改查功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值