vue.js 过滤器、ajax数据、事件监听实例
来源:互联网 发布:js promise实现原理 编辑:程序博客网 时间:2024/06/05 03:28
在vue.js开发时,数据可以使用jquery和vue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。
app.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
<?phpheader("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;
1 0
- vue.js 过滤器、ajax数据、事件监听实例
- 7.vue.js实例:过滤器
- js监听事件实例
- Vue.js学习系列(三十五)-- Vue.js事件监听
- 【12】vue.js — 监听数据变化
- 事件监听、过滤器
- Vue.js过滤器概述
- Vue.js -- 过滤器
- vue.js 过滤器
- Vue.js过滤器学习
- Vue.js 过滤器
- Vue.js(过滤器)
- vue.js展示AJAX数据简单示例
- Vue.js学习系列(七)---监听事件
- Vue监听数据变化
- vue.js监听滚动条加载更多数据
- Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch
- 2.vue.js实例:双向数据绑定实例
- android与js互调
- 八九天内容回顾(API.正则表达式...)
- 如何绘制ROC曲线
- LeetCode刷题(C++)——Maximum Depth of Binary Tree(Easy)
- maven错误
- vue.js 过滤器、ajax数据、事件监听实例
- C++引用详解
- JavaScript之命名空间模式
- 页面下拉框的回显
- Java多线程/并发16、Atomic原子变量和原子操作
- J2EE
- ubuntu mysql 字符集设置
- Glide使用
- 组合数