How to use vue.js filter + ajax to implement event monitoring and background data interaction

This time I will bring you how to use vue.jsFilter ajax to implement event monitoring background data interaction, and use vue.js filter ajax to implement event monitoring background data interactionNotesWhat are they? The following is a practical case. Let’s take a look.

When developing vue.js, data can be obtained using jquery and vue-resource. When obtaining data, you must give an initial value to the data.

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;

Running results:

I believe I read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to implement Vue page skeleton screen

##How to implement communication between vue parent and child components

The above is the detailed content of How to use vue.js filter + ajax to implement event monitoring and background data interaction. For more information, please follow other related articles on the PHP Chinese website!