## 事件绑定
[TOC]
>[info] #### 循环绑定事件获取ID
~~~
<div id="myId">
<li v-for="item in items" @click="add(item)">
<p class="fri_p">
<img :src="item.img_src" alt=""/>
<span>@{{item.user_name}}</span>
<b class="fl_adF1"><i></i><em></em></b>
</p>
</li>
</div>
//add方法里的item就是v-for里的item
~~~
~~~
var list = rev.data.list;
var listVue = new Vue({
el: "#myId"
, data: {
items: list
}
,methods:{
add:function (event) {
console.log(event.user_id);
}
}
});
~~~
>[info] #### 获取点击当前内容
~~~
<li v-for="item in items" @click.once="add(item, $event)">
<p class="fri_p">
</p>
</li>
~~~
~~~
,methods:{
add:function (item, event) {
var el = event.currentTarget;
console.log(el);
}
}
~~~
>[info] #### v-for 循环,ajax获取数据动态加载,重新渲染列表
* 首先全局new Vue然后对data赋值
~~~
var listVue = new Vue({
el: "#myId"
, data: {
items: {}
}
, methods: {
add: function (item, event) {
var el = event.currentTarget;
}
}
});
~~~
~~~
function addStranger(page, keywords) {
var word = typeof(keywords) === 'undefined' ? '' : keywords;
$.post("", {page: page, keywords: word}, function (rev) {
if (rev.status === 0) {
var list = rev.data.list;
page = rev.data.page;
listVue.items = list;
}
}, 'json');
}
~~~
- 总导航
- 第一章 前端
- 1.0 js自定义模板
- 第二章 PHP
- 1.0 推荐博客
- 2.0 基础理论
- 0.1 require和include区别
- 0.2 php运行机制
- 0.3 Http请求与响应
- 0.4 http响应状态
- 3.0 Laravel框架
- 0.1 Eloquent ORM
- 0.2 时间处理
- 0.3 数据迁移
- 0.4 填充数据
- 4.0 composer安装
- 5.0 缓存
- 0.1 Opcache
- 0.2 Memcache
- 0.3 Redis
- 0.4 Output buffer
- 第三章 MYSQL
- 1.0 新增和重置密码
- 第四章 前端插件集
- 1.0 PreloadJS
- 0.1 LoadQueue
- 0.2 加载单个文件
- 0.3 加载进度显示
- 0.4 加载指定目录图片
- 0.5 加载json图片
- 2.0 Swiper
- 3.0 ECharts
- 0.1 简单实例
- 0.2 title操作
- 0.3 tooltip操作
- 0.4 top显示数字
- 0.5 双数据显示
- 0.6 大数据缩放显示
- 0.7 综合
- 4.0 Vue
- 0.1 模板语法
- 0.2 条件与循环
- 0.3 处理用户输入
- 0.4 计算属性
- 0.5 事件绑定
- 0.6 动态渲染列表
- 5.0 layui
- 0.1 动态渲染nav
- 0.2 layer使用
- 6.0 IScroll
- 7.0 AlloyTouch
- 8.0 jquery.tagsinput
- 9.0 Editormd
- 第五章 应用软件
- 1.0 Xshell
- 一螺集
- PHP
- 打印一天的区间时间
- 友好时间输出
- 导出Excel
- JAVASCRIPT
- js回车事件