<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中的方法传入当前点击行的值的更多相关文章

  1. vue中methods中的方法闭包缓存问题

    vue中methods中的方法闭包缓存问题 问题背景 需求描述 在路由的导航栏中需要, 判断是否为第一次点击 需要一个标志位来记录是否点击过 现状: 这个标志位只在一个函数中用过.不希望存放全局 希望 ...

  2. vue 在methods中调用mounted中的方法?

    首先可以在data中先声明一个变量 比如 isShow=' ' mounted 中 ---> methods 中 --->  this.sureDelBox(item) 直接this调用 ...

  3. vue在钩子中引用方法不成功

    在组建创建成功后调用methods里的方法fn1,失败,提示not a function: created(){ getData(){} } solution: created(){ this.get ...

  4. vue中怎么实现获取当前点击对象this

    应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...

  5. vue --》elementUI 中 el-table组件 如何实现点击列,让该列高亮显示 ?

    在elmentui官网中,只给了让当前行高亮显示的方法,但是如何让当前列高亮显示呢? <template> <div> <el-table :data="tab ...

  6. echarts 通过源码方法 传入对应data数据获取分割步长值

    通过源码方法获取这里的分割数字长度 /** * Quantity of a number. e.g. 0.1, 1, 10, 100 * * @param {number} val * @return ...

  7. about use Vue of methods

    methods 处理事件 methods 在vue中处理一些逻辑方面的事情.vue事件监听的方式看上去有点违背分离的传统观念.而实际上vue中所有事件的处理方式和表达式都是严格绑定在当前的视图的vie ...

  8. Vue在一个函数中调用另外一个函数

    如:在vue的methods中一个函数调用另外一个函数 this.$options.methods.函数名字(); (这样的话要注意,this的指向已经指向了这个实例而不是指向全局,所以可能会报错说b ...

  9. vue methods 中方法的相互调用

    vue在同一个组件内:方法之间经常需要互相调用. methods中的一个方法如何调用methods中的另外一个方法呢? 可以在调用的时候使用  this.$options.methods.test2( ...

随机推荐

  1. ajax之阴影效果实现(对象函数方法)

    shadow.js文件内容jQuery.fn.shadow = function () { //获取到每个已封装的元素 //this表示jQuery对象 this.each(function () { ...

  2. 磁盘修改AF

    请严格按照如下流程: 1 以管理员打开 硬盘安装助手 2 选择苹果Mac系统镜像 (cdr格式的) 3 直接选择要写入的盘,不要点击右边的方框中的勾选 (此时就可以写入了,虽然最后还是显示 Chang ...

  3. 微信JSAPI分享朋友圈调试经验:invalid signature签名错误排查

    .invalid signature签名错误.建议按如下顺序检查: 1.确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapi ...

  4. LVS(IPVS)了解

    从来都只是看文章,现在手工作一下. 参考URL: https://blog.csdn.net/langyue919/article/details/80935197 https://www.cnblo ...

  5. Nodejs通过账号密码连接MongoDB数据库

    转自https://blog.csdn.net/szu_lzz/article/details/77435804#commentBox 1.创建管理员 首先开启Mongo服务,然后切换admin数据库 ...

  6. Vue小问题汇总

    1.element-UI等组件更改默认样式: >>> https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html ...

  7. skyline添加wfs服务时,弹出错误“no layers were found”!

    1.问题描述: 使用TerraExplorer Pro添加ArcGIS Server 10.2发布的WFS服务图层时,弹出如下错误: 2.错误原因: 发布wfs服务前,图层数据源的空间参考未设置,不能 ...

  8. Codeforces 609F Frogs and mosquitoes 线段树

    Frogs and mosquitoes 用线段树维护每个点覆盖的最小id, 用multiset维护没有吃的蚊子. #include<bits/stdc++.h> #define LL l ...

  9. vue $mount 和 el的区别

    两者在使用效果上没有任何区别,都是为了将实例化后的vue挂载到指定的dom元素中. 如果在实例化vue的时候指定el,则该vue将会渲染在此el对应的dom中,反之,若没有指定el,则vue实例会处于 ...

  10. springmvc基础使用配置

    前言 本案例是在idea编辑器下,maven管理项目的前提下. 步骤 1.新建maven项目 2.配置web.xml <?xml version="1.0" encoding ...