1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <script src="./vue.min.js"></script>
  6.   <script src="./vue-resource.min.js"></script>
  7. </head>
  8.  
  9. <body>
  10.   <div id="app">
  11.     <span v-text='message'></span>
  12.     <br/>
  13.     {{CreationDate}}</div>
  14.  
  15.   <script>
  16.     var app = new Vue({
  17.       el: "#app",
  18.       data: {
  19.         message: '111',
  20.         CreationDate: '222'
  21.       },
  22.       mounted: function () {
  23.         this.init();
  24.  
  25.       },
  26.  
  27.       methods: {
  28.         init: function () {
  29.           var searchStr = location.search;
  30.           searchStr = searchStr.substr(1);
  31.           var searchs = searchStr.split("&");
  32.           var factory = searchs[0].split("=");
  33.           var id = searchs[1].split("=");
  34.           Vue.http.post('http://192.168.224.133:8000/api/NonconformanceReportApi/GetViewData?factory=' + factory[
  35.             1], {
  36.             Name: id[1]
  37.           }).then(function (data) {
  38.             if (data.ok) {
  39.  
  40.               this.message = data.data;
  41.  
  42.               this.CreationDate = data.data.CreationDate;
  43.               app.$forceUpdate(); 
  44.  
  45.             }
  46.  
  47.           })
  48.         }
  49.       }
  50.  
  51.     });
  52.     // $(document).ready(function () {
  53.     //   var searchStr = location.search;
  54.     //   searchStr = searchStr.substr(1);
  55.     //   var searchs = searchStr.split("&");
  56.     //   var factory = searchs[0].split("=");
  57.     //   var id = searchs[1].split("=");
  58.     //   $('#div1').load('http://192.168.224.133:8000/api/EmailGroupApi/GetEmailGroups?factory=p2');
  59.     //   $("button").click(function () {
  60.  
  61.     //     $.ajax({
  62.     //       type: 'post',
  63.     //       url: 'http://192.168.224.133:8000/api/NonconformanceReportApi/GetViewData?factory=' + factory[1],
  64.     //       data: {
  65.     //         name: id[1]
  66.     //       },
  67.     //       success: function (data) {
  68.     //         alert(data);
  69.     //         $('#div1').html(data.FpNcrName)
  70.     //       }
  71.     //     });
  72.     //   });
  73.     // });
  74.   </script>
  75. </body>
  76.  
  77. </html>

页面数据已经更改 ，但是没有重新渲染，有大神知道什么原因吗，在线等，十分感谢

VUE页面渲染问题的更多相关文章

  1. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  2. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  3. vue中数据接收成功，页面渲染失败

    1.vue中数据接收成功,页面渲染失败.代码如下 经过查找资料修改代码为 或是 原因是: 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:  ...

  4. Vue数据产生变化需要页面渲染完之后执行某操作

    1.数据产生变化或者页面需要vue数据渲染完之后加载的东西 Vue.nextTick(function () { alert(123); }); 2 调用vue方法 --------------Vue ...

  5. vue再页面渲染json数据时没有显示

    对象点属性不能获取数据. 原因: 在创建数据对象时我使用了k,v方式:tempMap['category '] = this.category[i].label 如果在创建数据时使用的k,v方式,那么 ...

  6. python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  7. Web开发中，页面渲染方案

    转载自:http://www.jianshu.com/p/d1d29e97f6b8 (在该文章中看到一段感兴趣的文字,转载过来) 在Web开发中,有两种主流的页面渲染方案: 服务器端渲染,通过页面渲染 ...

  8. Vue页面骨架屏(二)

    实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...

  9. Vue页面骨架屏（一）

    在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...

随机推荐

  1. 一、python中的一切皆对象

    1.函数和类是对象,是Python中的一级公民 (1)将函数和类赋值给一个变量 将函数或类赋值给一个变量,就可以把该变量当成函数或类来使用 def ask(name): print(name) cla ...

  2. Kubernetes生态工具

    Helm Helm 是 Kubernetes 的包管理器,它是查找.共享和使用为 Kubernetes 开发的软件的最佳方式.Helm Charts 可用于定义.安装和升级复杂的 Kubernetes ...

  3. 为什么比特币和以太坊未必真得比EOS更去中心化？

    在区块链行业里,有两派人一直在争论:一个是以比特币和以太坊为首的社群,另一个是以EOS为首的社群.这两群人一直在争论谁才是真正的未来,双方都认为自己这边更有未来.其中EOS抗争的重点就是100万TPS ...

  4. [UE4]接口

    一个椅子可以被抓起和放下,一扇门可以打开和关上.一个抽屉可以拉开和关上. 椅子.门.抽屉都可以用手拉,然后放下,但是它们的打开和关上的行为是不一样的,它们之间没有继承关系,没法共用“打开”和“关闭”的 ...

  5. [UE4]显示落地箭头

    一.Set Hidden in Game:隐藏对象 Propagate to Children:是否修改容器子对象的可见性. 二.添加2个Static Mesh,分别命名为:StaitcMeshArr ...

  6. docker-compose hello word

    Compose 是 Docker 容器进行编排的工具, 是一个整合发布docker应用的利器,可定义和运行多容器的应用,在 Compose 中你可以使用 YAML 文件来配置你的应用服务.然后,只需要 ...

  7. Quartus Linux usbblaster

    In path: /etc/udev/rules.d adding file: 51-usbblaster.rules $ pwd/etc/udev/rules.d$ ls -lZ 51-usbbla ...

  8. AJAX完整操作

    $("#btn1").click(function () { $.ajax({ url: "ajax/login.ashx", //请求访问的服务端地址 dat ...

  9. oracle表的基本操作

    --修改名称rename l_user_info to t_user_info --添加带有约束的表 create table t_user_menu( id number(20) primary k ...

  10. 【Appium自学】Android studio安装与配置（转）

    转自链接:https://www.cnblogs.com/xiadewang/p/7820377.html 1.首先下载Android studio安装包. 可以从http://www.android ...