Vue

1 Vue ajax渲染数据

查询所有，按ID查询，修改实例

CSS

[v-cloak] {display: none;
}

HTML

<div id="app"><tr v-for="u in userList" v-cloak><td><input name="ids" type="checkbox"></td><td>{{u.id}}</td><td>{{u.username}}</td><td>{{u.password}}</td><td>{{u.sex}}</td><td>{{u.age}}</td><td class="text-center">{{u.email}}</td><td class="text-center"><button type="button" class="btn bg-olive btn-xs">详情</button><button type="button" class="btn bg-olive btn-xs" @click="findById(u.id)">编辑</button></td></tr><!--模态窗口--><div class="tab-pane" id="tab-model"><div id="myModal" class="modal modal-primary" role="dialog"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">用户信息</h4></div><div class="modal-body"><div class="box-body"><div class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">用户名:</label><div class="col-sm-5"><input type="text" class="form-control"v-model="user.username"></div></div><div class="form-group"><label class="col-sm-2 control-label">密码:</label><div class="col-sm-5"><input type="text" class="form-control"v-model="user.password"></div></div><div class="form-group"><label class="col-sm-2 control-label">性别:</label><div class="col-sm-5"><input type="text" class="form-control"v-model="user.sex"></div></div><div class="form-group"><label class="col-sm-2 control-label">年龄:</label><div class="col-sm-5"><input type="text" class="form-control"v-model="user.age"></div></div><div class="form-group"><label class="col-sm-2 control-label">邮箱:</label><div class="col-sm-5"><input type="text" class="form-control"v-model="user.email"></div></div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button><button type="button" class="btn btn-outline" data-dismiss="modal"@click="update">修改</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --></div><!--模态窗口/-->
</div>

var vm = new Vue({el: app,data: {user: {id: "",username: "",password: "",email: "",age: "",sex: ""},userList: []}, methods: {findAll: function () {axios.get("/vuedemo/user/findAll.do").then(function (response) {vm.userList = response.data;}).catch(function (error) {console.log(error);})}, findById: function (userId) {axios.get('/vuedemo/user/findUserById.do',{params: {id: userId}}).then(function (response) {vm.user = response.data;$("#myModal").modal("show");}).catch(function (error) {console.log(error);});}, update: function (user) {axios.post("/vuedemo/user/updateUser.do", vm.user).then(function (response) {vm.findAll();}).catch(function (error) {console.log(error);})}},created: function () {//当页面加载时触发查询所有方法this.findAll();}
});

VUE+axios渲染数据相关推荐

vue v-for渲染数据出现DOMException: Failed to execute ‘removeChild‘ on ‘Node‘: The node .....
本文主要介绍 vue v-for渲染数据出现DOMException: Failed to execute 'removeChild' on 'Node': The node to be remove ...
vue 父页面中的方法调用_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识: https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过 ...
Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新
问题: 用ajax或者axios,get数据是正常的.但是渲染数据时data一直为空问题代码: 下面代码看起来是正常的,但是当运行的时候会报错: 这时候你运行时会发现,数据可以请求到,但是会报错Ty ...
vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识:https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过a ...
Gavin小黑屋——Vue 学习笔记：生命周期特点（先渲染HTML标签再渲染数据）
Vue基础生命周期特点(先渲染HTML标签再渲染数据) 目录 Vue基础生命周期特点(先渲染HTML标签再渲染数据) 一.Vue生命周期 Vue 的生命周期总共分为8个阶段:创建前/后,载 ...
Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
vue的路由踩坑坑……之路（＜router-link/＞，＜router-view/＞）之router-link跳转时浏览器的路径是正确的，而router-view却不渲染数据？？？
为什么我的router-link跳转时浏览器的路径是正确的,而router-view却--为什么不渲染数据???这个问题我纠结了好几个小时..到最后,真真真--(无语子) 先上图,看目录: 我的目录长 ...
vue渲染大量数据如何优化_加速vue组件渲染之性能优化
背景平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下: export default { da ...
vue拿到数据渲染页面上
vue拿到数据渲染页面首先请求后台接口拿到数据使用console.log(res)打印从后台拿到数据 2.将拿到的数据放入一个数组里面 3.然后渲染到页面使用v-for进行遍历循环将数据一条 ...

VUE+axios渲染数据

Vue

1 Vue ajax渲染数据

VUE+axios渲染数据相关推荐

最新文章

热门文章