编程 Javascript

简单的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>

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

- Author -

一芥华

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

建立良好体验度的Web注册系统ajax

Jul 09 Javascript

Jquery实现控件的隐藏和显示实例

Feb 08 Javascript

推荐一个封装好的getElementsByClassName方法

Dec 02 Javascript

jQuery插件jRumble实现网页元素抖动

Jun 05 Javascript

再谈JavaScript线程

Jul 10 Javascript

JavaScript+CSS实现的可折叠二级菜单实例

Feb 29 Javascript

深入理解(function(){... })();

Aug 16 Javascript

轻松掌握JavaScript中介者模式

Aug 26 Javascript

一道面试题引发的对javascript类型转换的思考

Mar 06 Javascript

vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）

Apr 22 Javascript

js学使用setTimeout实现轮循动画

Jul 17 Javascript

layer弹出层自定义提交取消按钮的例子

Sep 10 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