Vue实现数据增加删除

最新推荐文章于 2023-11-13 14:10:39 发布

和蔼的阿木木o

最新推荐文章于 2023-11-13 14:10:39 发布

阅读量981

点赞数

分类专栏： js html vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_59642141/article/details/127025483

版权

js 同时被 3 个专栏收录

52 篇文章 1 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

html+js

<body>
    <div id="app">
        <input type="text" class="ipt1" v-model="title1" placeholder="标题">
        <input type="text" class="ipt1" v-model="name1" placeholder="发布人">
        <input type="date" style="outline: none;height:20px ;" v-model="time1">
        <button class="xinzeng" @click="addobj()">新增</button>
        <table border="1" cellspacing="0" class="table">
            <tr class="tr1">
                <th>序号</th>
                <th>标题</th>
                <th>发布人</th>
                <th>发布时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in list" :key="index" class="tr2">
                <td>{{index+1}}</td>
                <td>{{item.title}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time}}</td>
                <td>
                    <button @click="editRow=index;remove(item)" class="del">删除</button>
                    <button class="edit"
                        @click=" visible=true;editRow=index;temp=item.title;temp2=item.name;temp3=item.time">编辑</button>
                </td>
            </tr>
        </table>
        <model :visible.sync="visible">
            <p class="text">标题：<input type="text" v-model="temp" class="ipt1"> </p>
            <p class="text">发布人：<input type="text" v-model="temp2" class="ipt1"></p>
            <p class="text">发布时间：<input type="date" v-model="temp3" class="ipt1"></p>
            <button @click="sureEdit()" class="yes">保存</button>
            <button @click="visible=false" class="no">取消</button>
        </model>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./tankuang.js"></script>
<script>
    new Vue({
        el: "#app",
        components: { model },
        data() {
            return {
                temp: "",
                temp2: "",
                temp3: "",
                editRow: null,
                visible: false,
                title1: "",
                name1: "",
                time1: "",
                list: [{
                    title: "在移动设备开发",
                    name: "张若筠",
                    time: "2018-02-09",

                }, {
                    title: "图像及特效",
                    name: "章子怡",
                    time: "2018-02-09",
                },
                {
                    title: "设备兼容特性",
                    name: "蔡徐坤",
                    time: "2018-02-09",
                },
                {
                    title: "w3c致力于开发用于通信",
                    name: "张碧晨",
                    time: "2018-02-09",
                },
                {
                    title: "全新的表单",
                    name: "张晓辉",
                    time: "2018-02-09",
                },]
            }
        },
        methods: {
            remove(item) {
                var index = this.list.indexOf(item);
                var ind = confirm("确定要删除吗")
                if (ind) {
                    this.list.splice(index, 1)
                };
            },
            sureEdit() {
                //让编辑行的title修改为temp（temp和编辑框双向绑定）
                this.list[this.editRow].title = this.temp;
                this.list[this.editRow].name = this.temp2;
                this.list[this.editRow].time = this.temp3;
                this.visible = false;
            },
            addobj() {
                if (this.title1 == "" || this.name1 == "" || this.time1 == "") {
                    alert("输入不能为空")
                } else {
                    this.list.push({ title: this.title1, name: this.name1, time: this.time1 })
                }
                this.title1 = ""; this.name1 = ""; this.time1 = "";
            }
        },

    })
</script>

tan.css

* {
    padding: 0;
    margin: 0;
}

#app {
    width: 1000px;
    margin: 0 auto;
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3);
}

.modal-content {
    width: 400px;
    height: 400px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.title {
    line-height: 40px;
    background-color: #fafafa;
    text-align: center;
    position: relative;
}

.modal .close {
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    position: absolute;
    right: 0;
    cursor: pointer;
}

.modal-body {
    margin-left: 50px;
    padding: 20px;

}

.text {
    padding: 10px 20px;
}

.text:nth-of-type(2) {
    text-indent: -1em;
}

.text:nth-of-type(3) {
    text-indent: -2em;
}

.xinzeng {
    color: #fff;
    background-color: #008cd4;
    border: none;
    cursor: pointer;
    width: 50px;
    height: 25px;
    border-radius: 5px;
}

.table {
    text-align: center;
    margin-top: 20px;
    width: 1000px;
    border-collapse: collapse;
}


.ipt1 {
    outline: none;
    height: 25px;
    width: 250px;
    border: 1px solid #ccc;
    background-color: #fafebc;
}

.tr1 {
    border: none;
    height: 35px;
    background-color: #f3f5f5;
}

.tr2 {
    border: 1px solid #ccc;
    height: 35px;
}

.del {
    border: none;
    color: #f00;
    margin-right: 20px;
    cursor: pointer;
    background-color: transparent;
}

.edit {
    border: none;
    color: #0088d4;
    cursor: pointer;
    background-color: transparent;

}

.yes {
    width: 50px;
    height: 25px;
    margin-left: 50px;
    margin-top: 50px;
    border: none;
    background-color: greenyellow;
    cursor: pointer;
}

.no {
    width: 50px;
    height: 25px;
    margin-left: 25px;
    margin-top: 50px;
    border: none;
    background-color: #ffeebc;
    cursor: pointer;
}

轮播组件swiper.js

// 01 定义子组件
var model = {
    template: `
    <div class="modal" v-if="visible">
        <div class="modal-content">
        <h2 class="title">编辑<button class="close" @click="$emit('update:visible',false)">x</button></h2>
        <div class="modal-body">
            <slot></slot>
        </div>
        </div>
    </div>`,
    props: {
        visible: {
            type: Boolean,
            default: false,
        }
    }
}