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.load()和Jsp的include的区别
Apr 12 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 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
php foreach、while性能比较
2009/10/15 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
微信支付开发发货通知实例
2016/07/12 PHP
万能的php分页类
2017/07/06 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
python matplotlib画图实例代码分享
2017/12/27 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
百度JavaScript笔试题
2015/01/15 面试题
新闻工作者先进事迹
2014/05/26 职场文书
面试通知邮件
2015/04/20 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL