• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 简单的vue-resourse获取json并应用到模板示例

简单的vue-resourse获取json并应用到模板示例

作者:一芥华 字体:[增加 减小] 来源:互联网 时间:2017-05-11

一芥华通过本文主要向大家介绍了json示例,json数据示例,json字符串示例,json格式示例,ppt模板示例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

不说废话上代码:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>vue js</title>
    <style>
      .completed {
        text-decoration: line-through;
      }
      
      .something {
        color: red;
      }
    </style>
  </head>

  <body>

    <div class="container">
      <div id="app">
        <task-app :list="tasks">

        </task-app>
      </div>
      <template id="task-template">
        <ul>
          <li v-for="task in list">
            {{ task.id }} | {{ task.author }} | {{ task.name }} | {{ task.price }}
          </li>
        </ul>
      </template>
      <script src="vue.js"></script>
      <script src="vue-resource.js"></script>

      <script>
        Vue.component('task-app', {//要应用的标签
          template: '#task-template',//模板id
          props: ['list']//请求的json
        })
      </script>
      <script>
        var demo = new Vue({
          el: '#app',
          data: {
            tasks: '' //为空,可以是null
          },
          ready: function() {
            this.getCustomers()
          },
          methods: {
            getCustomers: function() {
              this.$http.get('resourse.json')
                .then(function(response) { //response传参,可以是任何值
                  this.$set('tasks', response.data)
                })
                .catch(function(response) {
                  console.log(response)
                })
            }
          }
        })
      </script>
  </body>

</html>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 简单的vue-resourse获取json并应用到模板示例
  • 微信小程序通过api接口将json数据展现到小程序示例
  • jQuery操作json常用方法示例

相关文章

  • 2017-05-11js调用刷新界面的几种方式
  • 2017-05-11JS 在数组指定位置插入/删除数据的方法
  • 2017-05-11jquery实现自定义图片裁剪功能【推荐】
  • 2017-05-11socket.io实现在线群聊功能
  • 2017-05-11Nodejs 获取时间加手机标识的32位标识实现代码
  • 2017-05-11javascript滚轮事件基础实例讲解(37)
  • 2017-05-11Bootstrap table简单使用总结
  • 2017-05-11详解angular用$sce服务来过滤HTML标签
  • 2017-05-11微信小程序开发图片拖拽实例详解
  • 2017-08-19关于call和apply函数

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • vue拦截器Vue.http.interceptors.push使用详解
    • 根据指定 日期格式 生成 指定格式的指定日期
    • Bootstrap进度条与AJAX后端数据传递结合使用实例详解
    • 使用get方式提交表单在地址栏里面不显示提交信息
    • vue.js从安装到搭建过程详解
    • nodejs中全局变量的实例解析
    • 深入对Vue.js $watch方法的理解
    • Vue开发过程中遇到的疑惑知识点总结
    • 原生JavaScript实现Tooltip浮动提示框特效
    • 5种JavaScript脚本加载的方式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有