亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例

 更新時(shí)間：2018年08月09日 11:27:33   作者：猴哥哥5  
今天小編就為大家分享一篇vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

實(shí)例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/vue.min.js"></script>
 <script src="/vue-resource.min.js"></script>
 <style>
  #th th{
   background-color: #50a9fa;
   color: aliceblue;
   font-size: large;
  }
 </style>
</head>
<body >
<div id="app" align="center">
 <input type="text" v-model="id">
 <input type="text" v-model="pname">
 <button @click="addData">添加數(shù)據(jù)</button>
 <table id="th" border="1"solid width="400px">
  <tr>
   <th>編號(hào)</th>
   <th>名稱</th>
   <th>時(shí)間</th>
   <th>操作</th>
  </tr>
  <tr v-for="item in list ">
   <td>{{item.id}}</td>
   <td>{{item.name}}</td>
   <td>{{item.ctime}}</td>
   <td>
    <a href="javascript:void(0)" rel="external nofollow" >刪除</a>
   </td>
  </tr>
 </table>
</div>
<script>
 //vue的生命周期
 
 new Vue({
  el:'#app',
  data:{
   list:[]
  },
  //vue對(duì)象實(shí)例創(chuàng)建成功之后就會(huì)自動(dòng)調(diào)用這個(gè)方法
  //如果你想寫的方法在舒適化的時(shí)候就被調(diào)用的話就要要用到created這個(gè)
  created:function () {
   this.getlist();//這里定義這個(gè)方法，vue實(shí)例之后運(yùn)行到這里就調(diào)用這個(gè)函數(shù)
  },
  methods:{
   getlist:function () {
    //請(qǐng)求服務(wù)器的api獲取到品牌的數(shù)據(jù)列表
    this.$http.get('http://vueapi.ittun.com/api/getprodlist').then(function (response) {
     //處理服務(wù)器異常信息提示
     if(response.body.status!=0)
     {
      alert(response.body.message);
      return ;
     }
     //處理正常的邏輯數(shù)據(jù)處理
     this.list=response.body.message;
     
    });
    

   }
   
  }
 });
</script>
</body>
</html>

以上這篇vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論