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 相关文章推荐
jQuery 美元符冲突的解决方法
Mar 28 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
如何在PHP中生成随机数
2020/06/04 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
使用python加密自己的密码
2015/08/04 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python抽取指定url页面的title方法
2018/05/11 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python笔记之代理模式
2019/11/20 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
python 检测图片是否有马赛克
2020/12/01 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
2015年出纳年终工作总结
2015/05/14 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
python函数的两种嵌套方法使用
2022/04/02 Python