如何使用vue.js過濾器+ajax實現事件監聽後台資料交互

這次帶給大家如何使用vue.js過濾器 ajax實現事件監聽後台資料交互，使用vue.js過濾器ajax實現事件監聽後台資料交互的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

index.html：

nbsp;html>


 <meta>
 <title>
 vuejs 过滤器、ajax数据、嵌套循环、if判断、事件监听
 </title>
 <style>
  [v-cloak] { display: none }
 </style>


 <p>
  <button>ajax获取数据</button>
  </p>

                                                                                                        

id	姓名	手机号	城市	性别	通过审核	我的学生	操作
{{item.id}}	{{item.name}}	{{item.tel}}	{{item.sex | sexFormat}}	{{item.province}}_{{item.city}}	是	否	{{stu.name}},	修改      删除

  <script></script> <script></script> <script> $(function() { Vue.filter(&#39;sexFormat&#39;,function (value){ if(value == 1){ return "男"; } else return "女"; }); new Vue({ el: &#39;#app&#39;, 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(&#39;修改&#39;) }, }, 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>

json.php：

<?php header("Content-type:text/html;charset=utf-8");
for($i=1;$i<6;$i++){
 $data[]=array(
  &#39;id&#39;=>$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;

運行結果：

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼實作Vue頁骨架螢幕

#怎麼實作vue父子元件間通訊

以上是如何使用vue.js過濾器+ajax實現事件監聽後台資料交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！