vue.js過濾器+ajax實現事件監聽及后臺php數據交互實例

2019-11-19 13:48:17

字體：大中小

來源：轉載

供稿：網友

本文實例講述了vue.js過濾器+ajax實現事件監聽及后臺php數據交互。分享給大家供大家參考，具體如下：

在vue.js開發時，數據可以使用jquery和vue-resource來獲取數據。在獲取數據時，一定需要給一個數據初始值。

index.html：

<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title> vuejs 過濾器、ajax數據、嵌套循環、if判斷、事件監聽 </title> <style type="text/css">  [v-cloak] { display: none } </style></head><body> <div id="app">  <button v-on:click="getData">ajax獲取數據</button>  <table>   <tr>    <td >id</td>    <td >姓名</td>    <td >手機號</td>    <td >城市</td>    <td >性別</td>    <td >通過審核</td>    <td >我的學生</td>    <td >操作</td>   </tr>   <tr v-for="(item,index) in list ">    <td>{{item.id}}</td>    <td>{{item.name}}</td>    <td>{{item.tel}}</td>     <td>{{item.sex | sexFormat}}</td>    <td>{{item.province}}_{{item.city}}</td>    <td v-if="item.status==1">是</td>    <td v-else-if="item.status==0">否</td>    <td >     <span v-for="stu in item.stu ">     {{stu.name}},     </span>    </td>    <td>     <button v-on:click="edit">修改</button>     <button v-on:click="del(index)">刪除</button>    </td>   </tr>  </table> </div></body><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script><script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script><script type="text/javascript">$(function() { Vue.filter('sexFormat',function (value){  if(value == 1){   return "男";  }  else return "女"; }); new Vue({  el: '#app',  methods: {   getData: function(){     var url="json.php";     var _self=this;     $.get(url,function(data){      _self.list=eval("(" + data +")");     })   },   del:function(index){    this.list.splice(index,1);   },   edit: function () {    alert('修改')   },  },  data: {   "list":[{    "id":"139",    "name":"王五",    "tel":"13681829898",    "status":"1",    "province":"省",    "city":"市",    "sex":"1",    "stu":[{     "id":"200",     "name":"學生1",     "tel":"13681829898",    },{     "id":"201",     "name":"學生2",     "tel":"13681829898",    }],   },   {    "id":"138",    "name":"麻子",    "tel":"13681829898",    "status":"0",    "province":"省",    "city":"市",    "sex":"0",    "stu":[{     "id":"300",     "name":"學生31",     "tel":"13681829898",    },{     "id":"301",     "name":"學生32",     "tel":"13681829898",    }],   },   {    "id":"137",    "name":"麗麗",    "tel":"15152882891",    "status":"0",    "province":"省",    "city":"市",    "sex":"1",    "stu":[{     "id":"400",     "name":"學生41",     "tel":"13681829898",    },{     "id":"401",     "name":"學生42",     "tel":"13681829898",    }],   },   {    "id":"136",    "name":"娜娜",    "tel":"15152882891",    "status":"0",    "province":"省",    "city":"市",    "sex":"0",    "stu":[{     "id":"500",     "name":"學生51",     "tel":"13681829898",    },{     "id":"501",     "name":"學生52",     "tel":"13681829898",    }],   }]  } })})</script></html>

json.php：

<?phpheader("Content-type:text/html;charset=utf-8");for($i=1;$i<6;$i++){ $data[]=array(  'id'=>$i,  'name'=>'test'.$i,  'tel'=>'1368585789'.$i,  'status'=>1,  'province'=>'上海市',  'city'=>'上海市',  'sex'=>1,  'stu'=>array(array('id'=>$i,'name'=>'stu'.$i,'tel'=>'1568585789')), );}echo json_encode($data);exit;

運行結果：