Vue基础增删改查批量操作

Vue跟ajax相似，但也有不同，Vue比较简单

@*v-..指令*@
@*只渲染一次*@


link:'<a href="http://www.baidu.com">百度</a>'


@*v-..指令*@
@*只渲染一次*@
<h2 v-once>当前名称是:{{name}}</h2>
<h2>{{counter*2}}</h2>
@*路径*@
<h2 v-html="link"></h2>
//let 局部变量
//var 全局变量
let app = new Vue({
     el: "#app",
　　　　data: {
　　　　//随意属性
　　　　name: "Vuejs",
　　　　firstName: 'coder',
　　　　lastName: 'why',
　　　　counter: 100,
link:'<a href="http://www.baidu.com">百度</a>'
}
})

 

1.Vue添加功能

跟之前有所不同的就是ID属性换成指令，要应用Vue插件

V-model     双向绑定

V-on:click    点击事件

 

 

Vue的编辑语法

1 挂载

2data定义对象

3  methods   编辑方法

4  created   相当于文档就绪函数

 

 

 

 

添加定义对象，里面写对应的属性

 

 

 编辑添加的流程写地址存入数据库

 

 

 绑定下拉框

需要用到循环指令   V-for(item,index) in 对象

 

Vue的显示

首先做出来排版

 

 显示的部分是运用循环指令进行的

<tr v-for="(item,index) in list">
            <td><input type="checkbox" name="name" :value="item.SId" v-model="chks" /></td>
            <td>{{item.SName}}</td>
            <td>{{item.NName}}</td>
            <td>{{item.Sex?"男":"女"}}</td>
            <td>{{item.Age}}</td>
            <td>{{item.Hobby}}</td>
            <td><a href="#" v-on:click="edit(item.SId)">编辑</a> | <a href="#">删除</a></td>
        </tr>

显示的方法

  loadData() {  //加载数据
                axios.get('/Student/PageShow', {
                    params: {
                        //? sname = ' + this.sname + ' & nid=' + this.nid + '& pageindex=' + this.pageindex + '& pagesize='+this.pagesize+'
                        sname: this.sname,
                        nid: this.nid,
                        pageindex: this.pageindex,
                        pagesize: this.pagesize
                    }
                }).then(res => {
                    this.list = res.data.Data  //加载list
                    this.totalcount = res.data.TotalCount;  //总条数
                    this.totalpage = res.data.TotalPage     //总页数
                })

要在钩子函数里调用

 

 批量删除操作首先要进行一个全选的功能标题上定义多选框，绑定指令给个值

 

 接下来循环获取多选框的值

 

 setChecked() {  //全选 非全选
                if (!this.chk) {   //将所有的复选框变成选中状态
                    //循环将 list 当中的  SId 添加到 chks 当中  那你的复选框变成选中状态
                    for (var i = 0; i < this.list.length; i++) {
                        this.chks.push(this.list[i].SId)
                    }
                } else {  //将所有的复选框变成未选中状态
                    this.chks = [];
                }
            },

给批量操作的按钮给个点击事件用指令  V-on:click

编辑方法   删除的方法同理

  batchEdit() {  //批量修改
                if (this.chks.length==0) {
                    alert('请选择要修改的数据');
                    return;
                }
                if (confirm("确认要修改吗？")) {
                    axios.get('/Student/BatchEdit', {
                        params: {
                            ids: this.chks.toString(),
                            sex:false
                        }
                    }).then(res => {
                        if (res.data > 0) {
                            alert('修改成功');
                            this.loadData();
                        } else {
                            alert('修改失败')
                        }
                    })
                }
            },

显示分页的按钮  给A标签给上点挤事件然后进行方法编辑，点击事件给参数

 

<div>
        <a href="#" v-on:click="pageData('f')">首页</a>
        <a href="#" v-on:click="pageData('p')">上一页</a>
        <a href="#" v-on:click="pageData('n')">下一页</a>
        <a href="#" v-on:click="pageData('l')">尾页</a>
        <span>当前 {{pageindex}} / {{totalpage}} 共{{totalcount}}条 </span>
        跳转<input type="text" name="name" value="" style="width:40px" /> <input type="button" name="name" value="Go" />
    </div>

pageData(op) {  //分页
                switch (op) {
                    case "f":
                        this.pageindex = 1;
                        break;
                    case "p":
                        this.pageindex = this.pageindex <= 1 ? 1 : this.pageindex - 1;
                        break;
                    case "n":
                        this.pageindex = this.pageindex >= this.totalpage ? this.totalpage : this.pageindex + 1;
                        break;
                    case "l":
                        this.pageindex = this.totalpage;
                        break;
                    default:
                }
                this.loadData();
            },
//切记要重新调用一下显示的刷新页面修

修改之前是编辑编辑要传送Id

edit(id) {// 编辑
location.href = '/Student/EditStudent?id=' + id;
}

 

 

//所有的代码

@{
ViewBag.Title = "ShowStudent";
}
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<h2>当前用户:@((Session["UserInfo"] as Model.UserInfo).UserName)</h2>
<div id="app">
<div style="margin-bottom: 5px; background-color: #e1efff; border:1px solid #ccc; padding:5px">
学生姓名<input type="text" name="name" value="" v-model="sname" />
学生班级<select v-model="nid">
<option v-for="(item,index) in selectItems" :value="item.NId">{{item.NName}}</option>
</select>
<input type="button" name="name" value="查询" class="btn btn-success" v-on:click="loadData" />
<input type="button" name="name" value="批量删除" class="btn btn-danger" v-on:click="delAll" />
<input type="button" name="name" value="批量修改状态" class="btn btn-warning" v-on:click="batchEdit" />
<input type="button" name="name" value="添加" class="btn btn-default" onclick="location.href='/Student/AddStudent'" />
</div>
<table class="table table-bordered">
<tr style="background-color:cornflowerblue;color:white; font-weight:400">
<td>
<input type="checkbox" name="name" value="" v-model="chk" v-on:click="setChecked" />
</td>
<td>学生姓名</td>
<td>学生班级</td>
<td>学生性别</td>
<td>学生年龄</td>
<td>学生爱好</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in list">
<td><input type="checkbox" name="name" :value="item.SId" v-model="chks" /></td>
<td>{{item.SName}}</td>
<td>{{item.NName}}</td>
<td>{{item.Sex?"男":"女"}}</td>
<td>{{item.Age}}</td>
<td>{{item.Hobby}}</td>
<td><a href="#" v-on:click="edit(item.SId)">编辑</a> | <a href="#">删除</a></td>
</tr>
</table>
<div>
<a href="#" v-on:click="pageData('f')">首页</a>
<a href="#" v-on:click="pageData('p')">上一页</a>
<a href="#" v-on:click="pageData('n')">下一页</a>
<a href="#" v-on:click="pageData('l')">尾页</a>
<span>当前 {{pageindex}} / {{totalpage}} 共{{totalcount}}条 </span>
跳转<input type="text" name="name" value="" style="width:40px" /> <input type="button" name="name" value="Go" />
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data() { //属性
return {
list: [], //接收要显示的数据集合
totalcount: 0, //接收总条数用的
totalpage: 0, //接收总页数
selectItems: [], //接收下拉
sname: "",
nid: 0,
pageindex: 1,
pagesize: 3,
chk: false, //主 复选框的属性
chks:[] //副 复选框的属性
}
},
methods: { //方法
loadData() { //加载数据
axios.get('/Student/PageShow', {
params: {
//? sname = ' + this.sname + ' & nid=' + this.nid + '& pageindex=' + this.pageindex + '& pagesize='+this.pagesize+'
sname: this.sname,
nid: this.nid,
pageindex: this.pageindex,
pagesize: this.pagesize
}
}).then(res => {
this.list = res.data.Data //加载list
this.totalcount = res.data.TotalCount; //总条数
this.totalpage = res.data.TotalPage //总页数
})
},
loadSelect() { //加载下拉
axios.get('/Student/GetClassList').then(res => {
this.selectItems = res.data;
//unshift 数组的第一个位置 插入 一条数据
this.selectItems.unshift({"NId":"0","NName":"请选择"});
})
},
pageData(op) { //分页
switch (op) {
case "f":
this.pageindex = 1;
break;
case "p":
this.pageindex = this.pageindex <= 1 ? 1 : this.pageindex - 1;
break;
case "n":
this.pageindex = this.pageindex >= this.totalpage ? this.totalpage : this.pageindex + 1;
break;
case "l":
this.pageindex = this.totalpage;
break;
default:
}
this.loadData();
},
setChecked() { //全选 非全选
if (!this.chk) { //将所有的复选框变成选中状态
//循环将 list 当中的 SId 添加到 chks 当中 那你的复选框变成选中状态
for (var i = 0; i < this.list.length; i++) {
this.chks.push(this.list[i].SId)
}
} else { //将所有的复选框变成未选中状态
this.chks = [];
}
},
delAll() { //批量删除
if (this.chks.length==0) {
alert('请选择要删除的数据')
return;
}
if (confirm("确认是否要删除？")) {
axios.get('/Student/DelAll?ids=' + this.chks.toString()).then(res => {
if (res.data > 0) {
alert('删除成功')
this.loadData();
} else {
alert('删除失败')
}
});
}
},
batchEdit() { //批量修改
if (this.chks.length==0) {
alert('请选择要修改的数据');
return;
}
if (confirm("确认要修改吗？")) {
axios.get('/Student/BatchEdit', {
params: {
ids: this.chks.toString(),
sex:false
}
}).then(res => {
if (res.data > 0) {
alert('修改成功');
this.loadData();
} else {
alert('修改失败')
}
})
}
},
edit(id) {// 编辑
location.href = '/Student/EditStudent?id=' + id;
}
},
created: function () { //钩子函数 相当于 文档就绪函数 （初始化数据）
this.loadData(); //调用方法
this.loadSelect();
}
})
</script>