@{

    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. 【腾讯bugly干货分享】精神哥手把手教你怎样智斗ANR

    上帝说要有ANR,于是Bugly就有了ANR上报.那么ANR究竟是什么? 近期非常多童鞋问起精神哥ANR的问题,那么这次就来聊一下,鸡爪怎么泡才好吃.噢不,是怎样高速定位ANR. ANR是什么 简单说 ...

  2. Form Template Method

    <重构>中此方法叫做塑造模板函数,在设计模式中,对应的模式就是模板模式.重构中的很多变动比较大的方法都会导致重构,但重构中有非常多的小重构手法.就好像建筑一个房子,设计模式教你厨房客厅怎么 ...

  3. iOS 常用的几个第三方库

    网络通信 1.ASIHTTPRequest 这是一个经典的老库,功能完全而强大,但已经停止更新很久了(iOS5.0停止更新,但是我最近看github上这个项目有新改动).在不同iOS版本上略微有一些小 ...

  4. Hive 特性及原理

    特点:Hive是构建在hadoop之上的数据仓库.数据存储在hdfs上,数据计算用的mapreduce框架.用户无需掌握MR的编写,通过类SQL语句即可自动生成查询计划. 主要内容:     接入入口 ...

  5. MAC 开发 stm32 程序

    资料:http://www.cnblogs.com/humaoxiao 大神技术.

  6. java 读写Oracle Blob字段

    许久没有分享代码了,把这段时间写的一个Java操作Blob字段,有日子没写Java了,就当作笔记记录一下.1. [代码][Java]代码     跳至 [1] [全屏预览]package com.wa ...

  7. [Selenium] waitUntilAllAjaxRequestCompletes

    private static final String JQUERY_ACTIVE_CONNECTIONS_QUERY = "return $.active == 0;"; pri ...

  8. BZOJ_3073_[Pa2011]Journeys_线段树优化建图+BFS

    BZOJ_3073_[Pa2011]Journeys_线段树优化建图+BFS Description Seter建造了一个很大的星球,他准备建造N个国家和无数双向道路.N个国家很快建造好了,用1..N ...

  9. 「LuoguP1145」 约瑟夫（打表

    Description n 个人站成一圈,从某个人开始数数,每次数到 m 的人就被杀掉,然后下一个人重新开始数,直到最后只剩一个人.现在有一圈人, k 个好人站在一起, k 个坏人站在一起.从第一个好 ...

  10. Python的单元测试工具——doctest

    doctest是一个python标准库自带的轻量单元测试工具,适合实现一些简单的单元测试.它可以在docstring中寻找测试用例并执行,比较输出结果与期望值是否符合. 基本用法使用doctest需要 ...