简单的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 相关文章推荐
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
AngularJS内置指令
Feb 04 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
ES6 十大特性简介
Dec 09 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 cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
vue中的inject学习教程
2019/04/24 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
Python中的元类编程入门指引
2015/04/15 Python
python实现自动更换ip的方法
2015/05/05 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
比利时买床:Beter Bed
2017/12/06 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
现场施工员岗位职责
2014/03/10 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
小学社会实践活动总结
2014/07/03 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
法定代表人证明书
2014/11/28 职场文书
保洁员岗位职责
2015/02/04 职场文书
公司财务经理岗位职责
2015/04/08 职场文书