帖子
帖子
用户
博客
课程
123下一页
返回列表 发新帖
8
帖子
0
勋章
48
Y币
你一定是会vue,用vue开发过一个简单的例子,但是放到其他框架里就不会用了,给你个例子吧,直接在页面中引用vue.js,然后
  1. <div  id="homeContent">
  2.   <p>{{list.name}}</p>
  3. </div>
  4. <script>
  5. var home = new Vue({
  6.                                 el: '#homeContent',
  7.                                 data: {
  8.                                         list:[]
  9.                                 },
  10.                                 updated:function(){
  11.                                          
  12.                                 }
  13.                         });
  14. //ajax 获取 res 直接home.list = res就好了
  15. </script>
复制代码
8
帖子
0
勋章
48
Y币
在其他框架中目前只使用到双向绑定
21
帖子
0
勋章
90
Y币
周理强 发表于 2017-10-19 10:30
你一定是会vue,用vue开发过一个简单的例子,但是放到其他框架里就不会用了,给你个例子吧,直接在页面中引 ...

使用过vue,但不太会!遇到一个问题,就是一个列表页面,展示几条列表数据,然后列表里面有个搜索,搜索之后我想还在这个页面显示,就修改原来绑定的数据,vue官方文档说不能够这样实现,后来我就用doT.js了!
21
帖子
0
勋章
90
Y币
周理强 发表于 2017-10-19 10:30
你一定是会vue,用vue开发过一个简单的例子,但是放到其他框架里就不会用了,给你个例子吧,直接在页面中引 ...

如果再修改home.list = res的数据,视图层不会改变?
8
帖子
0
勋章
48
Y币
**yyw1990 发表于 2017-10-19 10:54
如果再修改home.list = res的数据,视图层不会改变?

视图层会改变,举个常见的例子,比如上拉加载,首次是加载第一页的内容对吧,那我们接收到第一页的数据之后home.list = res,然后page++,当上拉加载是,加载第二页内容,这时候home.list.push(res),这样里面的内容就包含第一页内容和第二页内容了
8
帖子
0
勋章
48
Y币
**yyw1990 发表于 2017-10-19 10:53
使用过vue,但不太会!遇到一个问题,就是一个列表页面,展示几条列表数据,然后列表里面有个搜索,搜索 ...

这个应该是没有问题的,初次接收home.list = res,搜索是一个新的ajax请求,接收数据后还是home.list = res,就会重新绑定视图层
21
帖子
0
勋章
90
Y币
周理强 发表于 2017-10-19 11:21
这个应该是没有问题的,初次接收home.list = res,搜索是一个新的ajax请求,接收数据后还是home.list = r ...

对,我就是搜索之后继续使用home.list=res,但是视图层不会改变,我查了一些文档还是解决不了,无奈才用的doT.js。
8
帖子
0
勋章
48
Y币
**yyw1990 发表于 2017-10-19 12:22
对,我就是搜索之后继续使用home.list=res,但是视图层不会改变,我查了一些文档还是解决不了,无奈才用 ...
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>

  9. <body>
  10.   <div  id="homeContent">
  11.     <p>{{list.update_time}}</p> <!-- //TODO -->
  12.     <div class="">
  13.       ---------------------------
  14.     </div>
  15.     <button type="button" name="button" onclick="ss()">
  16.       点击变化视图层
  17.     </button>
  18.   </div>



  19.     <script src="script/vue.min.js" charset="utf-8"></script>
  20.     <script src="script/api.js" charset="utf-8"></script>
  21.     <script type="text/javascript">
  22.     var home = new Vue({
  23.                                   el: '#homeContent',
  24.                                   data: {
  25.                                           list:[]
  26.                                   },
  27.                                   updated:function(){

  28.                                   }
  29.                           });
  30.         function ss(){
  31.           var ob = {"workprice":"","update_time":"2017-10-22 13:46:00"};
  32.             home.list = ob;//这里面只是简单的赋值,上面的数据相当于重新ajax获取数据
  33.             console.log(JSON.stringify(home.list));
  34.         }

  35.         apiready = function() {

  36.           api.ajax({
  37.               url: 'http://**.**/',//TODO
  38.               method: 'post',
  39.               dateType:"json",
  40.               data: {
  41.                   body: {"id": "1"}//TODO
  42.               }
  43.           }, function(ret, err) {

  44.               if (ret) {
  45.                   home.list = ret;
  46.                   api.alert({ msg: JSON.stringify(ret) });
  47.                   console.log(JSON.stringify(ret));
  48.               } else {
  49.                   api.alert({ msg: JSON.stringify(err) });
  50.               }
  51.           });



  52.         }
  53.     </script>

  54. </body>

  55. </html>
复制代码
8
帖子
0
勋章
48
Y币
script/vue.min.js,script/api.js需要建个文件夹,script,然后把这两个文件放进去,index.html文件建个,里面有注释,TODO是你要修改的地方
8
帖子
0
勋章
48
Y币
我是没问题,不论是在哪个框架里面使用vue都是可以的
123下一页
您需要登录后才可以回帖 登录

本版积分规则