使用Vue实现动态数据渲染修改删除

最新推荐文章于 2022-11-20 00:13:10 发布

ZhaoYulin6

最新推荐文章于 2022-11-20 00:13:10 发布

阅读量1.5k

点赞数 1

分类专栏： WEB前端开发文章标签： vue html

本文链接：https://blog.csdn.net/ZhaoYulin6/article/details/108555132

版权

本文介绍了如何使用Vue.js实现动态数据渲染、修改、删除功能。首先建立HTML结构，引入Vue开发版本，然后创建数据数组，定义Vue实例的属性和方法。详细讲述了删除操作、分页功能以及信息修改和新增数据的逻辑处理。最后提供了完整代码。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述

1.建立html结构（使用Vue所以使用一个大的div来包含所有的html结构）

<div id="table">
    <table border="1" cellpadding="10" cellspacing="0">
        <thead>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
        </thead>
        <tbody>
        <tr v-for="(item,index) in array"  v-show="index >= start && index<= end">
            <td>{
  {item.id}}</td>
            <td>{
  {item.name}}</td>
            <td>{
  {item.sex}}</td>
            <td>{
  {item.age}}</td>
            <td>
                <button @click="xiugai( index )" >修改</button>
                <button @click="del( index )">删除</button>
                 <button @click="add">新增</button>
            </td>
        </tr>
        </tbody>
    </table>

<!--翻页的内容-->
<div id="ye">
    <button @click="pre">上一页</button>
    <span> <button v-for="page in Math.ceil(array.length/5)"
                   @click="tiao(page)">{
  {page}}</button></span>
    <button @click="next">下一页</button>
</div>


<!--    修改框-->
    <!--修改框-->
    <from class="xiugai" v-show="isShow" >
        <label for="id">序号</label>
        <input id="id" type="text" disabled v-model="messageid" >
        <br>
        <label for="usename">姓名</label>
        <input id="usename" type="text" v-model="messagename" ref="name" >
        <br>
        <label for="sex">性别</label>
        <input id="sex" type="text" v-model="messagesex" ref="sex">
        <br>
        <label for="age">年龄</label>
        <input id="age" type="text" v-model="messageage" ref="age">
        <br>
        <button  type="button" id="change"  @click="gai">修改</button>
        <button  type="button" id="display" @