Asp.net MVC + Vue.js
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生列表</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style type="text/css">
.bg{
background:red;
}
</style>
</head>
<body>
<div id="demo">
<label>姓名</label> <input type="text" id="name" v-model="name"/>
<label>性别</label> <input type="text" id="gender" v-model="gender"/>
<label>年龄</label> <input type="text" id="age" v-model="age"/>
<label>爱好</label> <input type="text" id="hobby" v-model="hobby"/>
<button v-on:click="AddStuList">添加</button>
<table border="1" cellspacing="5" cellpadding="5" v-show="stuList.length">
<caption><h3>学生列表</h3></caption>
<tr>
<th>状态</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in stuList" :class="{bg:item.isChecked}">
<td><input type="checkbox" name="" id="" value="" v-model="item.isChecked"/></td>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
<td>{{item.age}}</td>
<td>{{item.hobby}}</td>
<td><button v-on:click="delStuList(item)">删除</button></td>
</tr>
</table>
</div>
<script>
var list=[
{
name:"张三",
gender:"男",
age:"12",
hobby:"睡觉",
isChecked:false
},
{
name:"张三",
gender:"男",
age:"12",
hobby:"睡觉",
isChecked:false
}
];
var vm=new Vue({
el:"#demo",
data:{
stuList:list,
name:"",
gender:"",
age:"",
hobby:"",
isChecked:""
},
methods:{
AddStuList:function(){
var stu={
name:this.name,
gender:this.gender,
age:this.age,
hobby:this.hobby,
isChecked:this.isChecked
}
this.stuList.push(stu);
this.name='';
this.gender='';
this.age='';
this.hobby='';
isChecked='';
},
delStuList:function(item){
var index=this.stuList.indexOf(item);
this.stuList.splice(index)
}
}
});
</script>
</body>
</html>
最新文章
- Dynamics AX 2012 R2 窗体系列 - 在窗体上修改字段时所触发的方法及其顺序
- 增量式PID计算公式4个疑问与理解
- SQL——查询考试
- mysql中文坑爹的东西
- js正则表达式校验非负整数：^\d+$ 或 ^[1-9]\d*|0$ 【转载】
- Response.Redirect("x.aspx);跳转后session为null的解决方法
- 使用AjaxPro
- ifame 跨域高度自适应
- 在本地Apache服务器配置虚拟主机站点
- Ubuntu14.04安装AMD显卡驱动双屏显示器完全解决方案
- 在Mac OS X系统下 用dd命令将iso镜像写入u盘
- hadoop源码学习(二）之ZooKeeper
- CPU芯片哪家强？电视处理器这么选就对了！
- Android 读写权限，已经授权情况下，仍然(Permission denied)
- linux命令总结iostat命令
- MySQL 术语
- 【BZOJ-1913】signaling信号覆盖 极角排序 + 组合
- L215 Visual impairment
- UVaLive 2796 Concert Hall Scheduling (最小费用流)
- Ajax文件上传三式