vue-resource实现数据的绑定、添加、删除
vue-resource实现数据的绑定、添加、删除
<!DOCTYPE html>
<html lang="en">
<head>
<title>简单用户管理</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue-resource是基于vue的，应在引用vue之后引用vue-resource-->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
<div id="app">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">基于vue.js的简单用户管理</h3>
</div>
<div class="panel-body form-inline ">
<label>
<!--v-focus为自定义指令的调用，元素自动获得焦点-->
username:
<input type="text" class="form-control" v-model="username" v-focus>
</label>
<label>
userpwd:
<input type="text" class="form-control" v-model="userpwd">
</label>
<button class="btn btn-primary" @click="add()">Create</button>
</div>
</div>
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>username</th>
<th>userpwd</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists" :key="list.userid">
<td>{{list.username}}</td>
<td>{{list.userpwd}}</td>
<td>
<!--prevent为阻止事件的默认行为-->
<a href="" @click.prevent="del(list.userid)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
Vue.http.options.root = 'http://localhost:18227/' //设置全局请求根路径
Vue.http.options.emulateJSON = true; //启用from格式的请求 //自定义指令
Vue.directive('focus', {
inserted: function (el) {
el.focus()
},
}); new Vue({
el: '#app',
data: {
username: "",
userpwd: "",
lists: []
},
methods: {
del(userid) {
this.$http.get('Index/DelJson?userid=' + userid).then((result) => {
if (result.body.State === 1) {
this.getAllLists();
}
}).catch((err) => {
alert("获取数据失败");
});
},
add() {
var list = { username: this.username, userpwd: this.userpwd };
this.$http.post('Index/AddJson', list, {}).then((result) => {
this.username = this.userpwd = "";
if (result.body.State === 1) {
this.getAllLists();
}
}).catch((err) => {
alert("获取数据失败");
});
},
getAllLists() {
this.$http.get('Index/ReturnJson').then((result) => {
this.lists = result.body;
}).catch((err) => {
alert("获取数据失败");
});
}
},
created() {
console.log("第一步")
// 实例初始化完成
this.getAllLists();
},
})
</script>
</html>
服务端代码为C#，以下是控制器
public string ReturnJson()
{
var userlist = db.User.Where<User>(u => true);
return JsonConvert.SerializeObject(userlist);
}
public JsonResult AddJson(User user)
{
MsgJson m = new MsgJson();
db.User.Add(user);
if (db.SaveChanges() > )
{
m.Msg = "请求成功";
m.State = ;
}
else {
m.Msg = "请求失败";
m.State = ;
}
return Json(m);
}
public JsonResult DelJson(string userid)
{
int did = int.Parse(userid);
List<User> userlist =db.User.Where(u => u.userid == did).ToList();
User user = userlist[];
db.User.Remove(user);
MsgJson m = new MsgJson();
if (db.SaveChanges() > )
{
m.Msg = "请求成功";
m.State = ;
}
else
{
m.Msg = "请求失败";
m.State = ;
}
return Json(m, JsonRequestBehavior.AllowGet);
}
vue-resource实现数据的绑定、添加、删除的更多相关文章
- 从Object.definedProperty中看vue的双向数据的绑定
前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
- vue 父子组件数据双向绑定
父组件 <find-search v-model="searchshow"></find-search> 子组件 props: { value: { typ ...
- 针对vue中请求数据对象新添加的属性不能响应式的解决方法
1.需要给对象添加属性时,不能采用传统的obj.属性=值,obj[属性]=值 来添加属性,在vue页面时需要这样使用 this.$set(obj,"propertyName",&q ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- 使用Bootstrap + Vue.js实现 添加删除数据
界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...
随机推荐
- 【爆料】-《亚伯大学毕业证书》Aber一模一样原件
☞亚伯大学毕业证书[微/Q:865121257◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&am ...
- Java基础-常用的String方法
先从String的new的方式 说起 这是面试题里面经常出现的 算是老套路之一 就是 比较下列两个的变化 两种实例化的区别 第一种String name1 = "好人";Strin ...
- HTML5网页录音和上传到服务器，支持PC、Android，支持IOS微信
准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时 ...
- 深度揭秘腾讯云新一代企业级HTAP数据库TBase核心概念
腾讯云PostgreSQL-XZ(PGXZ)经过公司内部多年业务的打磨,在2017年改名为TBase后,正式对外推出,目前已在政务.医疗.公安.消防.电信.金融等行业等行业的解决方案中大量应用.TBa ...
- javascript引擎执行的过程的理解--执行阶段
一.概述 同步更新sau交流学习社区(nodeJSBlog):javascript引擎执行的过程的理解--执行阶段 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍 ...
- 目前比较流行的Python量化开源框架汇总(交易+风险分析工具)
注:点击框架名称通往Github talib talib的简称是Technical Analysis Library,主要功能是计算行情数据的技术分析指标 numpy 介绍:一个用python实现的 ...
- 刨根问底：if 后怎么就可以跟对象，变量交换写法是语法糖吗？
1.万物皆可布尔 一般语言中的 if 语句语法是这样的: if (条件表达式){ 执行语句} 而在 Python 中,if 后面不仅可以是条件表达式,还可以是任意对象.例如: my_list = ...
- C# 插入超链接到PDF文档（3种情况）
超链接可以实现不同元素之间的连接,用户可以通过点击被链接的元素来激活这些链接.具有高效.快捷.准确的特点.本文中,将分享通过C#编程在PDF文档中插入超链接的方法.内容包含以下要点: 插入网页链接 插 ...
- openlayers4 入门开发系列之热力图篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- Git：一、简介&安装Git 2.20.1
0.Git官网 1.简介 一个分布式版本控制系统. 作用:自动记录每次文件的改动,还可以让同伴协作编辑. 分布式与集中式相比优点在于:版本库在每个人自己电脑上,不需要一直在网上,也不用担心某一个数据库 ...