Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法


Posted in jQuery onAugust 09, 2018

1. 引入jquery和vue.js

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

2. JS

<script type="text/javascript">
$(function(){
	vm = new Vue({
    el:'#lst',
    data:{
      mcs : []
    }
  });
	getmc();
});
 
function getmc(){
	$.get("getJsonData.action",
    function(msg){
	  vm.mcs = msg
  });
}
</script>

3. HTML

<div id="lst" v-cloak>
    <div v-for="mc in mcs">
        <p>
          <a :href="'abbbbb.action?id=' + mc.id " rel="external nofollow" >{{mc.titles}}</a>
        </p>
      </div>
    </div><p>
  <input type="button" onclick="getmc()" value="更新页面" />
</p>

以上这篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 #jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 #jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 #jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 #jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 #jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
You might like
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python框架flask表单实现详解
2019/11/04 Python
python中常见错误及解决方法
2020/06/21 Python
深入了解Python 变量作用域
2020/07/24 Python
戴尔美国官网:Dell
2016/08/31 全球购物
奥地利网上书店:Weltbild
2017/07/14 全球购物
会计实习自我鉴定
2013/12/04 职场文书
小学毕业寄语大全
2014/04/03 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
加强作风建设工作总结
2014/10/23 职场文书
《角的度量》教学反思
2016/02/18 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
python缺失值填充方法示例代码
2022/12/24 Python