@{

    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. 迭代器模式（Iterator.hasNaxt()）

    迭代器模式(Iterator Pattern)是 Java 和 .Net 编程环境中非常常用的设计模式.这种模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示. 迭代器模式属于行为型模式. ...

  2. Ruby中任务构建工具rake的入门

    不同的rake文件当中不要定义重名的方法,不然没法调用 参考:http://www.jb51.net/article/81476.htm Rake简介 Rake的意思是Ruby Make,一个用rub ...

  3. javascript中基本类型和引用类型的区别分析

    大多数人系统学习过的程序设计语言,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别.下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引 ...

  4. 阮一峰 KMP BM算法

    存一个链接,讲得好啊! 点击这里打开     字符串KMP 点击这里打开     字符串匹配的Boyer-Moore算法

  5. 关于python代码的性能

    在python中性能测试是一个很难应付的任务,因为它在反复地优化,也许版本和版本之间差别很大.python中的一个主要的原则是,首先为了简单和可读性去编写代码,在程序运行后,并证明了确实有必要考虑性能 ...

  6. VMware Ubuntu 共享文件夹

    /**************************************************************************** * VMware Ubuntu 共享文件夹 ...

  7. POJ3696:The Luckiest number(欧拉函数||求某数最小的满足题意的因子)

    Chinese people think of '8' as the lucky digit. Bob also likes digit '8'. Moreover, Bob has his own ...

  8. NSArray是强引用容器

    经常比较疑惑NSArray.NSDictionary.NSSet这几个对象容器管理对象所采用的方式是“强引用”还是“弱引用”. 通过简单的命令行程序得到的结论是“NSArray.NSDictionar ...

  9. 「LuoguP4047」 [JSOI2010]部落划分

    Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...

  10. Watir: 如何处理简单的网页弹出警告框？

    以下是一个很经典的把Watir与AutoIt连接在一起的实例.如果我们对AutoIT了解的更多,处理类似的问题会更加简单.以下实例会判断页面上是否有某“删除”链接,一旦有该链接,就点击,然后点击弹出的 ...