vue给methods中的方法传入当前点击行的值
<template>
<!-- 在template中,只能存在一个根组件 -->
<div class="event">
<ul>
<li v-on:click="getName(name,index,$event)" v-for='(name,index) in names'>{{name}}</li>
</ul>
<input type="text" v-on:keyup.enter="getKeyInfo" />
<button v-on:click="pushArr">pushArr</button>
<button v-on:click="getOdd">奇数</button>
<ul>
<li v-for="n in wantNums">{{n}}</li>
</ul>
<p>{{message}}</p>
<p>{{msgRe}}</p>
<p>{{msgRe2()}}</p>
</div>
</template>
<script>
export default {
data() {
return {
names: ['小军', '小明', '小李'],
count: 0,
nums: [1, 2, 3, 4, 5, 6, 7, 8, 9],
wantNums: [],
message:'how are you today!'
}
},
methods: {
getName(name, index, event) {
console.log(this.names[index])
console.log(event)
alert(index + '--' + name)
},
getKeyInfo(event) {
console.log(event)
},
pushArr() {
this.names.push('name' + this.count++)
},
getOdd() {
this.nums.filter(m => {
if(m % 2 != 0) {
this.wantNums.push(m)
}
})
},
msgRe2(){//每次都计算
return this.message.split('').reverse().join('')
}
},
computed:{
msgRe(){//如果属性值没有发生改变,直接从缓存中取
return this.message.split('').reverse().join('')
}
}
}
</script>
<style>
li {
list-style: none;
}
li:hover {
background: red;
cursor: pointer;
}
</style>
vue给methods中的方法传入当前点击行的值的更多相关文章
- vue中methods中的方法闭包缓存问题
vue中methods中的方法闭包缓存问题 问题背景 需求描述 在路由的导航栏中需要, 判断是否为第一次点击 需要一个标志位来记录是否点击过 现状: 这个标志位只在一个函数中用过.不希望存放全局 希望 ...
- vue 在methods中调用mounted中的方法?
首先可以在data中先声明一个变量 比如 isShow=' ' mounted 中 ---> methods 中 ---> this.sureDelBox(item) 直接this调用 ...
- vue在钩子中引用方法不成功
在组建创建成功后调用methods里的方法fn1,失败,提示not a function: created(){ getData(){} } solution: created(){ this.get ...
- vue中怎么实现获取当前点击对象this
应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...
- vue --》elementUI 中 el-table组件 如何实现点击列,让该列高亮显示 ?
在elmentui官网中,只给了让当前行高亮显示的方法,但是如何让当前列高亮显示呢? <template> <div> <el-table :data="tab ...
- echarts 通过源码方法 传入对应data数据获取分割步长值
通过源码方法获取这里的分割数字长度 /** * Quantity of a number. e.g. 0.1, 1, 10, 100 * * @param {number} val * @return ...
- about use Vue of methods
methods 处理事件 methods 在vue中处理一些逻辑方面的事情.vue事件监听的方式看上去有点违背分离的传统观念.而实际上vue中所有事件的处理方式和表达式都是严格绑定在当前的视图的vie ...
- Vue在一个函数中调用另外一个函数
如:在vue的methods中一个函数调用另外一个函数 this.$options.methods.函数名字(); (这样的话要注意,this的指向已经指向了这个实例而不是指向全局,所以可能会报错说b ...
- vue methods 中方法的相互调用
vue在同一个组件内:方法之间经常需要互相调用. methods中的一个方法如何调用methods中的另外一个方法呢? 可以在调用的时候使用 this.$options.methods.test2( ...
随机推荐
- 数据库和linux对大小写的区分
- [转] JavaScript设计模式之发布-订阅模式(观察者模式)-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
- pp 总结二
1. return false ES6函数的扩展:箭头函数 数组 arr.map() arr.filter() <!DOCTYPE html> <html lang=&qu ...
- noip飞扬的小鸟
题解: 挺简单的题目 f[i][j]表示x坐标为i,y坐标为j的最小值 会发现那个东西是个完全背包 从f[i][j-a[i]]转移一下就是O(1)转移的了 另外上界为m这个要特判一下 我把sum[a[ ...
- 萨塔尼亚的期末考试(fail)
题解: 这题比较妙啊... 首先暴力自己算是找不出规律的 有一种直觉就是可以把式子变成{f[1]+...f[n]}+{f[2]+...+f[n]}+{f[3]+...+f[n]}... 然后看了题解发 ...
- postgresql 查询某一个表中的所有字段
select * from information_schema.columns where table_schema='public' and table_name='表名称 ';
- playbook role应用
参考: ansible中文权威指南 1. 动态Include 结合when等判断,在满足某个条件的时候加载. - include: test.yml when: ...... handler 中也可以 ...
- web请求过程-学习使人快乐1
智齿离开我10个小时了,现在除了书啥都不能啃········呜呜呜~ ~~~~~~~~~~~~~~~~~~~想滑滑梯~~~~~~~~~~~~~~~~~~~ 网络请求过程 web请求大多使用B/ ...
- 056 Java搭建kafka环境
1.使用Java项目搭建 2.新目录 3.添加项目支持 4.添加mavem与scala 5.修改pom <?xml version="1.0" encoding=" ...
- Python中元类
元类(metaclass) 简单地说,元类就是一个能创建类的类,而类class 是由type创建的,class可以创建对象 type与object的关系详见:python中type和object 1. ...