本文实例讲述了vue.js过滤器创建交互式、快速动态网页应用的网页开发技术实现事件监听及后台服务器端编程语言(专业超文本预处理器的缩写)数据交互。分享给大家供大家参考，具体如下：

在vue.js开发时，数据可以使用框架和虚拟资源来获取数据。在获取数据时，一定需要给一个数据初始值。

index.html:

！doctype html html lang=' zh-CN ' head meta charset=' UTF-8 ' title vuejs过滤器、ajax数据、嵌套循环、如果判断、事件监听/title style type=' text/CSS '[v-斗篷]{ display : none }/style/head body div id=' app '按钮v-: click=' getData ' Ajax获取数据/按钮表td id/td td姓名运输署/运输署手机号运输署/运输署城市运输署/运输署性别运输署/运输署通过审核运输署/运输署我的学生运输署/运输署操作/TD/tr v-for='列表中的（项目，索引)”TD { { item。id } }/TD TD { { item }。名称} }/TD TD { { item }。tel } }/TD { { item。sex | Sexformat } }/TD { { item。省份} } _ { { item。城市} }/TD TD TD v-if='项。状态==1 '是/td td v-else-if='item.status==0 '否/TD TD span v-for=' stu in item。斯图。名称} }，/span/TD TD按钮：点击='编辑'修改/按钮按钮v-:点击=' del(索引)'删除/button/TD/tr/table/div/body脚本src=' http :3359 cdn。bootcss。com/jquery/3。2 .1/jquery。量滴js ' charset=' utf-8 '/script script src=' http :3359 cdn。bootcss。com/vue/2。3 .0/vue。量滴js ' charset=' utf-8 '/脚本脚本类型=' text/javas男；}否则返回女；});new Vue({ el: '#app '，methods : { getdata : function(){ var URL=' JSON。PHP '；var _ self=this$。获取(网址，函数（数据){ _ self。list=eval('(' data ')')；}) }，del :函数(索引){ this。名单。拼接(索引，1)；}，edit:函数() { alert('修改)}，}，数据： { ' list ' :[{ ' id ' : ' 139 '，' name': '王五，'电话' :'13681829898 ','状态' :'1 ','省' : '省，'城市' :市，' sex':'1 '，' stu':[{ 'id':'200 '，' name': '学生1 ','电话：'13681829898 '，}，{ 'id':'201 '，'姓名' : '学生2 ','电话：'13681829898 '，}]，}，{ 'id':'138 '，'姓名' : '麻子，'电话' :'13681829898 ','状态' :'0 ','省' : '省，'城市' :市，' sex':'0 '，' stu':[{ 'id':'300 '，' name': '学生31 ','电话：'13681829898 '，}，{ 'id':'301 '，'姓名' : '学生32 ','电话：'13681829898 '，}]，}，{ 'id':'137 '，'姓名' : '丽丽，'电话' :'15152882891 ','状态' :'0 ','省' : '省，'城市' :市，'性' :'1 ，' stu':[{ 'id':'400 '，' name': '学生41 ','电话：'13681829898 '，}，{ 'id':'401 '，'姓名' : '学生42 ','电话：'13681829898 '，}]，}，{ 'id':'136 '，'姓名' : '娜娜，'电话' :'15152882891 ','状态' :'0 ','省' : '省，'城市' :市，' sex':'0 '，' stu':[{ 'id':'500 '，' name': '学生51 ','电话：'13681829898 '，}，{ 'id':'501 '，'姓名' : '学生52 ','电话：'13681829898 '，}]，}] } })})/script/htmljson.php:

？phpheader(' Content-type : text/html；charset=utf-8 ')；for($ I=1；$ i6 $ I){ $ data[]=数组(' id'=$i，' name'='test ' .$i，'电话'='1368585789 '。$我，”状态"=1,"省份"="上海市，'城市'='上海市，' sex'=1，' stu'=array(array('id'=$i，' name'='stu ').$i，' tel '=' 1568585789 ')；} echo JSON _ encode($ data)；退出；运行结果：

希望本文所述对大家vue.js程序设计有所帮助。