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


Posted in Javascript onFebruary 10, 2017

不说废话上代码:

<!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>

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

Javascript 相关文章推荐
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
webpack之devtool详解
Feb 10 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
小程序转发探索示例
Feb 19 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 #Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 #Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 #Javascript
BootStrapValidator初使用教程详解
Feb 10 #Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 #Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 #Javascript
JS实现的数字格式化功能示例
Feb 10 #Javascript
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
php类常量的使用详解
2013/06/08 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python3 replace()函数使用方法
2018/03/19 Python
python实现微信自动回复功能
2018/04/11 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
运动会通讯稿300字
2014/02/02 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
2015年教师节感言
2015/08/03 职场文书
Python图片检索之以图搜图
2021/05/31 Python
Python中第三方库Faker的使用详解
2022/04/02 Python