vue-resourse怎么獲取json并應(yīng)用到模板

發(fā)布時(shí)間：2021-07-07 14:28:00 來(lái)源：億速云閱讀：104 作者：小新欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)vue-resourse怎么獲取json并應(yīng)用到模板的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

代碼如下：

<!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', {//要應(yīng)用的標(biāo)簽
          template: '#task-template',//模板id
          props: ['list']//請(qǐng)求的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>

感謝各位的閱讀！關(guān)于“vue-resourse怎么獲取json并應(yīng)用到模板”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

vue-resourse怎么獲取json并應(yīng)用到模板

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽