利用vue.js双向数据绑定完成表单的增删改查

最新推荐文章于 2024-05-07 01:24:55 发布

唐十八_wei

最新推荐文章于 2024-05-07 01:24:55 发布

阅读量309

点赞数 1

本文链接：https://blog.csdn.net/shibaweijin/article/details/107018967

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        tbody:empty:after {
            content: '没有找到';
        }
    </style>
</head>
<body>
<div id="app">
    <input type="text" v-model="searchName">
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in getStuListBySearch ">
            <td>{{item.stuName}}</td>
            <td>{{item.age}}</td>
            <td><span @click="up(index)">修改</span> <span @click="del(index)">删除</span> </td>
        </tr>
        </tbody>
        <tr>
            <td><input type="text"  v-model="username" /></td>
            <td><input type="text"  v-model="age" /></td>
            <td><button type="button" v-on:click="save(index)">添加</button></td>
        </tr>
    </table>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">

    var app = new Vue({
        el:'#app',
        data:{
            stuList:[
                {stuName:'小牧',age:22},
                { stuName:'小hai',age:32},
                { stuName:'小米',age:12}
            ],searchName:'',
            username:'',
            age:'',
           index:-1
        },
        methods:{
            del(index) {
                this.stuList.splice(index,1)
            },
            save: function (index) {
                if(this.index==-1){
                    this.addStu()
                } else{
                    this.username=this.stuList[index].stuName
                    this.age=this.stuList[index].age
                }
            },
            addStu(){
                if(this.username.length==0){
                    alert('请输入用户名');
                    return
                }else if(this.age.length==0){
                    alert('请输入年龄');
                    return
                }
                var age =parseInt(this.age);
                if(isNaN(age)){
                    alert('年龄请输入数字');
                    return
                }
                var obj = {stuName: this.username, age: this,age}
                this.stuList.push(obj)
                this.username=''
                this.age=''
            },
            up(index){
                this.index=index
                this.username=this.stuList[index].stuName
                this.age=this.stuList[index].age
            },
            edit: function (obj) {
                this.rowtemplate = obj;
            }
        },computed:{
//            getStuListBySearch(){
//                var search =this.searchName;
//                var arr =[];
//                for(var i=0;i<this.stuList.length;i++){
//                    if(this.stuList[i].stuName.indexOf(search)>=0){
//                        arr.push(this.stuList[i])
//                    }
//                }
//                return arr
//            },
            getStuListBySearch(){
                var search=this.searchName
                return  this.stuList.filter(function (item) {
                    return item.stuName.indexOf(search)>=0
                })
            }
        }
    })
</script>
</body>
</html>

唐十八_wei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用vue.js双向数据绑定完成表单的增删改查

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> tbody:empty:after { content: '没有找到'; } </style></head><body&g
复制链接

扫一扫