从数据库获取到json数据,前端用vue.js数据绑定
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呢不知道是不是这样子。
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。