@{

    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>

 

Asp.net MVC + Vue.js的更多相关文章

  1. ASP.NET MVC+Vue.js实现联系人管理

    接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...

  2. asp.net mvc + vue.js + axios.js

    1.新建一个 MVC 应用程序 2.右键解决方案 添加VUE 3.搜索vue 1.安装axios.js ,用于数据请求,get , post axios

  3. ASP.NET Core + Vue.js 开发

    1.新建 项目文件夹 pro,在 VS CODE 打开终端,输入dotnet new mvc 命令,新建asp.net core项目. 2.在Startup.cs添加webpack的引用与配置 usi ...

  4. MVC + Vue.js 初体验(实现表单操作)

    Vuejs http://cn.vuejs.org/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  5. [Asp.net Mvc]为js,css静态文件添加版本号

    方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...

  6. Asp.net MVC Vue Axios无刷新请求数据和响应数据

    Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; ...

  7. Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息

    客户要求用身份证图片上传获取身份证的详细信息就下来研究了一下(现在的客户真的懒 身份证信息都懒得输入了哈哈...),经过慢慢研究,果然皇天不负有心人搞出来了.这个借助的是腾讯的一个SKD  腾讯优图云 ...

  8. AspNetCore MVC + Vue.Js 项目搭建

    1.准备 全文重点在于搭建环境,其他相关知识点请百度. VS2017 升级到最新的版本 安装 net core 2.0 安装 npm (npm相关使用请百度或咨询前端小伙伴) 全局安装 webpack ...

  9. 【转】asp.net mvc css/js压缩合并 --- combres

    转自:http://www.cnblogs.com/zxktxj/archive/2012/05/30/2526246.html NuGet   网站:http://nuget.codeplex.co ...

随机推荐

  1. android按压背景

    android:background="?android:actionBarItemBackground"

  2. oracle 在insert into的时候报ORA-00928: missing SELECT keyword错 [问题点数：100分，结帖人dm520]

    转自:https://bbs.csdn.net/topics/310095274 INSERT INTO SA_Table(uniPositionCode,transferGroupName,appC ...

  3. CodeForces 1103D. Professional layer

    题目简述:给定$1 \leq n \leq 10^6$个正整数$1 \leq a_i \leq 10^{12}$,修改第$i$个正整数$a_i$的花费为$1 \leq e_i \leq 10^9$,以 ...

  4. linux以字符为单位进行读写操作

    1 所用函数 fgetc(FILE *fp):成功返回所读入的字符 失败为-1 fputc(int c,FILE *fp):第一个参数表示需要输出的字符 第二个参数表示输出的文件.成功返回输出的字符 ...

  5. python学习笔记3-循环1

    1 while break continue #while语句 ''' while 判断条件: 执行语句…… ''' count = 0 while (count < 9): print ('T ...

  6. .NET Core 3.0之深入源码理解Configuration(二)

      文件型配置基本内容 上一篇文章讨论了Configuration的几个核心对象,本文继续讨论Configuration中关于文件型配置的相关内容.相比较而言,文件型配置的使用场景更加广泛,用户自定义 ...

  7. Codeforces - 1117E - Crisp String - 进制 - 交互

    https://codeforces.com/problemset/problem/1117/E 就用abc表示数字来给每个数编码,编完直接问出移动的结果,反构造就行了,比C和D还简单. #inclu ...

  8. hdoj5115【区间DP·基础】

    题意: 有n头wolf排成一排,杀一头wolf回受到受到的伤害=它的本身a[i]+相邻两个b[i-1]+b[i+1].然后杀死第k个位置的wolf的话,k-1和k+1默认相邻(满足的话). 思路: 用 ...

  9. python 面向对象十二 元类

    一.类也是对象 只要使用关键字class,Python解释器在执行的时候就会创建一个对象.下面的代码段: class ObjectCreator(object): pass 将在内存中创建一个对象,名 ...

  10. bzoj 4161 Shlw loves matrixI【常系数线性齐次递推】

    并不会递推,不过板子挺好背的,只要是类似的递推都能用,但是注意c数组不能使负数 如果除了递推还有常数项的话,就用f[i]-f[i-1]的方式消掉常数项(然后多一个f[i-1]的项) #include& ...