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

2019-11-19 17:38:23

字体：大中小

来源：转载

供稿：网友

不说废话上代码：

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

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

上一篇：jQuery html表格排序插件tablesorter使用方法详解

下一篇：jQuery排序插件tableSorter使用方法