完成删除

最新推荐文章于 2022-07-30 08:03:03 发布

-好喜欢你

最新推荐文章于 2022-07-30 08:03:03 发布

阅读量204

点赞数 1

本文链接：https://blog.csdn.net/qq_42049884/article/details/101057358

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="JQuery/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>

<div id="app">
    <form @submit.prevent="insert">
        <input type="text" v-model="formData.name">
        <input type="text" v-model="formData.sex">
        <input type="submit">
    </form>
    <table class="table ">
        <thead>
        <th>姓名</th>
        <th>性别</th>
        <th>删除</th>
        </thead>
        <tbody>
        <tr v-for="value,index in list">
            <td>{{value.name}}</td>
            <td>{{value.sex}}</td>
            <td>
                <button @click="del(index)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
    //引用类型问题
    var vm=new Vue({
        el:"#app",
        data:{
            formData:{
                name:'',
                sex:'',
                age:'',
                achievement:''
            },
            list:[]
        },
        methods:{
            insert(){
                let obj = {};
                obj.name = this.formData.name;
                obj.sex = this.formData.sex;
                this.list.push(obj);
            },
            del(i){
                if(confirm("是否删除数据？")){
                    this.list.splice(i,1)
                }
            }
        }
    })
</script>
</body>
</html>

2、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码

这是第 {{i}} 个P标签

迭代data中的普通对象

{{val}} — {{key}} — {{i}}
角标：{{index}}------ 键名: {{key}} ------ 值：{{value}}

3、文字叙述v-model和v-bind的差别
1.v-model:
主要是用在表单元素中，它实现了双向绑定。在同事使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的中实现双向绑定。
2.v-bind:
eg：v-bind:class 可简写为 :class;
当加上v-bind:之后，它的值classe不是字符串，而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。他只是单向变动。

-好喜欢你

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完成删除

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7...
复制链接

扫一扫