@{

    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. MySQL的简单优化

    一.如何发现需要优化的SQL 主要使用MySQL的慢查日志对有效率问题的SQL进行监控 第一步:启动慢查日志的监控 打开开关,将未使用索引的查询记录到慢查日志中 设置查询时间,当查询时间大于这个值,就 ...

  2. MySQL table

    -- 使用数据库hr use hr; -- 在数据库中创建表-- ------------------------------------JOBS表-------------------------- ...

  3. bzoj5328: [Sdoi2018]物理实验

    果然我还是太菜了,爆了一天才过....隔壁肉丝都不知道喊了多少句哎╮(╯▽╰)╭我又A了什么傻逼题(然鹅就是wf和国集的题QWQ) 其实这个题就是个裸题,但是我就是不会... 这个题第一步就是明显的旋 ...

  4. Scrapy爬虫报错：ModuleNotFoundError: No module named 'win32api'

    运行 scrapy crawl douban_spider 出现报错: 解决办法:安装pywin32,下载适配安装的Python版本(64位,Python3.6) 下载地址: https://sour ...

  5. hdu 1400 Mondriaan's Dream 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1400 题目意思:给出一个h * w的 大 矩形,需要用 1 * 2 的砖块去填充这个大矩形,问填充的方 ...

  6. codeforces 448B. Suffix Structures 解题报告

    题目链接:http://codeforces.com/problemset/problem/448/B 题目意思:给出两种操作automaton:可以删除字符串中任意一个字符: array:交换字符串 ...

  7. Oracle:手工建库

    今天学习了小布老师的手工建库视频,自己也做了一遍,下面是创建过程记录: 本地环境oracle10.2.0.1 一.前期准备工作 1.设置环境变量 [oracle@app dbs]$ vi bbk.en ...

  8. IBATIS sql 小于（<) 写法 特殊符号写法

    SELECT * FROM XXX where  column1  <![CDATA [ < 100 ]]> ************************************ ...

  9. ORACLE PL/SQL 实例精解之第七章 迭代控制之二

    7.1CONTINUE语句 CONTINUE语句会导致循环终止当前迭代.并且当CONTINUE的条件为TRUE时,开始执行该循环的下一次迭代.需要借助于IF语句来计算COUNTINUE条件.当CONT ...

  10. rn滑动返回页面监听

    开发rn的同学都已经知道这个问题很坑了,真的很难弄,网上的方法尝试过很多,返回的的时候回调,是用的最多的,最开始我也是用的这种方式,但是滑动返回的时候监听不到.并且用起来也比较麻烦,不但需要在当前页面 ...