从数据库获取到json数据,前端用vue.js数据绑定
来源:互联网 发布:dnf额外暴击伤害算法 编辑:程序博客网 时间:2024/06/06 01:42
function userinfor() {$.get("http://127.0.0.1:8082/lzghcg/user/userShows",function(result, state) {//这里显示从服务器返回的数据new Vue({el:'#userinfor',data:{//data就是数据,主要绑定的数据lists:result}})//这里显示返回的状态// alert(state); /*dynamicTable(result)*/})}
使用vue的时候必须要创建一个vue的对象,
el是主要渲染到哪里去,就是html中css的id意思。
data:就是要渲染的数据,json数据哦
主要用到的是v-text指令
这个指令呢v-后面接的是类似一个方法的东西。官网有介绍。
就到了前台的绑定的数据了
此时候,还要用到一个v-for
vue中循环语句呢
<tbody id ="userinfor"><tr v-for="list in lists"><td width="30px" align="center"><input type="checkbox"name="checkbox" / style="margin: 0px"></td><td v-text="list.username"></td><td v-text="list.memo"></td></tr><tr><td width="30px" align="center"><input type="checkbox"name="checkbox" / style="margin: 0px"></td><td>admin</td><td>123</td><td>3</td><td><span class="redtitle" title="删除议题" onclick="">编辑</span><span class="redtitle" title="删除议题" onclick="">删除</span></td></tr><tr><td width="30px" align="center"><input type="checkbox"name="checkbox" / style="margin: 0px"></td><td>lee</td><td>1</td><td>3</td><td><span class="redtitle" title="删除议题" onclick="">编辑</span><span class="redtitle" title="删除议题" onclick="">删除</span></td></tr></tbody>红色是关键,但是我这样子 做的时候绑定就没有问题了,估计也会遇到一个问题 ,就是用最简单绑定数据的时候,会出现先加载你的页面才去调用vue.js才去帮你绑定。因为我是通过ajax去获取到数据,绑定的。不能用{{}}这种格式去绑定。只能去用v-text.
下面是个失败的例子
<!-- <div id="userinfor"><ul><li v-for="list in lists">{{list.username}}</li></ul></div> -->
反而页面会出现一个
{{list.username}}这个东西,过一会才有值出现。
我也不知道再怎么去解决它。最后我介绍我怎么去Java后台处理里面的值,看看 就好哈哈哈哈哈
var newVuedate = null;function dynamicTable(result) {var data = result;//取到一个json数据if (data == null) {return;}var datavue = [];for (var i = 0; i < data.length; i++) {//json类似一个数组,所以通过循环输出里面 var objproject = {"id" : result[i].id,//这个是赋值到一个数组对象里面去,开发的时候就是取到里面的值进行一个逻辑判断,要干嘛干嘛的。这个也加上他的下标"username" : result[i].username,/我可以给个例子看看明天吧"password" : result[i].password,"createdate" : result[i].createdate,"dele" : result[i].dele,"memo" : result[i].memo}datavue.push(objproject);}if (newVuedate == null) {newVuedate = new Vue({el : '#userinfor',data : {lists : datavue}});} else {newVuedate.lists = datavue}}这个呢,就是初始化vue的东西,大神告诉我,为啥绑不上去,就是还没有初始化vue呢不知道是不是这样子。
阅读全文
0 0
- 从数据库获取到json数据,前端用vue.js数据绑定
- vue.js获取数据库数据
- Vue.js数据绑定
- vue.js数据绑定
- JS—我的第六个AJAX程序(前端从数据库中获取数据库中数据,JSON传输)
- 从数据库获取数据前端实现建树
- 从Vue.js源码角度再看数据绑定
- select标签,拉下获取数据,数据从数据库获取绑定
- Vue.js数据绑定语法
- vue.js双向数据绑定
- vue.js数据绑定语法
- Vue.js笔记-数据绑定
- Atitit vue.js 把ajax数据 绑定到form表单
- json从数据库中获取数据
- vue渲染从后台获取的json数据
- vue开发:前端数据绑定的原理
- Vue.js解析(三)【从Vue.js源码角度再看数据绑定】
- 从页面获取取数据到数据库
- Wolf and Rabbit (GCD)【HDU】-1222
- STL之序列式容器难点分析
- unity学习日记-协程
- BOOST 日期时间库 之 日期长度与日期区间 2/3
- CSU-ACM2017暑期训练3-递推与递归 Non-boring sequences
- 从数据库获取到json数据,前端用vue.js数据绑定
- c++实现顺序表
- RabbitMQ消息队列生产者和消费者
- StringBuffer
- F
- 【JAVA之三】类与对象扩展.构造方法
- “转载”目录说明
- 一个简单例子讲明mysql存储过程是什么
- 《Java设计模式之适配器模式》