vue.js过滤器+ajax实现事件监听及后台php数据交互实例


Posted in Javascript onMay 22, 2018

本文实例讲述了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:

<?php
header("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;

运行结果:

vue.js过滤器+ajax实现事件监听及后台php数据交互实例

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

Javascript 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
angularJS开发注意事项
May 26 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
vue 实现走马灯效果
Oct 28 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
swiper 自动图片无限轮播实现代码
May 21 #Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 #Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 #jQuery
基于Vue的延迟加载插件vue-view-lazy
May 21 #Javascript
jQuery获取随机颜色的实例代码
May 21 #jQuery
JS实现常见的查找、排序、去重算法示例
May 21 #Javascript
vue组件jsx语法的具体使用
May 21 #Javascript
You might like
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php查看当前Session的ID实例
2015/03/16 PHP
php实现点击可刷新验证码
2015/11/07 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python3.5运算符操作实例详解
2019/04/25 Python
python各类经纬度转换的实例代码
2019/08/08 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python批量生成条形码的示例
2020/10/10 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
俄罗斯游戏商店:Buka
2020/03/01 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
求职信范文英文版
2014/01/05 职场文书
国企干部对照检查材料
2014/08/22 职场文书
一份文言文检讨书
2014/09/13 职场文书
2014年保育员工作总结
2014/12/02 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
高一军训口号
2015/12/25 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Python字符串常规操作小结
2022/04/03 Python