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的在线文件给大家引用: <!-- 最新版 ...
随机推荐
- Java的LockSupport.park()实现分析（转载）
LockSupport类是Java6(JSR166-JUC)引入的一个类,提供了基本的线程同步原语.LockSupport实际上是调用了Unsafe类里的函数,归结到Unsafe里,只有两个函数: p ...
- PPT分享第01季-226套多种风格模板
包含商务欧美扁平风.唯美文艺IOS风.互联网计划书风.扁平风手绘风卡通风 .中国风等多种风格 下面是部分模板截图: 下面是下载地址
- 死磕 java集合之LinkedBlockingQueue源码分析
问题 (1)LinkedBlockingQueue的实现方式? (2)LinkedBlockingQueue是有界的还是无界的队列? (3)LinkedBlockingQueue相比ArrayBloc ...
- c# 创建Excel com加载项图片对象批量操作
技术含量较低,主要是通过VBA代码转换成c#代码而来,从而实现图片批量插入.删除.另存为的批量操作,增加文档使用的通用性. 插件主要界面如下: 主要代码如下: private void button8 ...
- 教程：关于如何通过Maven仓库安装Spire系列的 Java产品
Spire系列库中已发布的Java产品目前有三个,即Spire.PDF for Java.Spire.Presentation for Java.Spire.Barcode for Java.使用该J ...
- solr 学习笔记1
创建核心(帮助: solr create_core -help) 例子: solr create_core -c mjj_core -d /var/solr/mjj_config (-c 是核心名称 ...
- 全球第一免费开源ERP Odoo工业互联网生产制造功能模块术语解析
物料清单 物料清单(BoM)用于描述物料.每种物料的数量.以及制造某一产品所需的步骤.由于行业和成品性质的不同,同一个文件可能有不同的命名.例如,在制药行业中,可以使用术语“处方”. 周期 产品周期是 ...
- 关于RecyclerView嵌套导致item复用异常，界面异常的问题
常规需求: 外层RecyclerView嵌套内层RecyclerView , 在上下滑动的时候会出现item数据以及view的显示异常. 解决办法: 1.重写 getItemViewType 方法 ...
- Android studio无法创建类和接口问题解决办法。提示 Unable to parse template "Class"
重新配置了studio 的工作环境, 没问题,后来加需求要新增java类和接口,这就出现问题了,新建的时候,就会报错: Unable to parse template "Interface ...
- July 08th. 2018, Week 28th. Sunday
Make each day your masterpiece. 让生命中的每一天都成为杰作. From John Wooden. Try to focus on what we are doing r ...