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>

原文地址:https://www.cnblogs.com/qiyc/p/9097976.html

时间: 2024-10-19 17:11:29

vue给methods中的方法传入当前点击行的值的相关文章

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

应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件中,我们可以获取当前点击事件的this来执行相应的操作,但是在vue中没有这个点击this事件! 解决问题 在vue中我们要通过组件的方式来实现对当前元素进去切换 父组件 <v-content :cont="item.content"></v-content> 子组

如果给JQ的ajax方法中的success()传入参数?

当时在使用JQuery提供的Ajax技术的时候,我有个需求,就是要给它请求成功后调用的success()方法传入参数: 所以,我就直接这样子写了: <script> function getTypeList(name){ $.ajax({ url : '<c:url value="admin/type_loadTypeList.action"/>', type : 'get', contentType : "text/html;charset=utf-

Vue父组件如何调用子组件(弹出框)中的方法的问题

如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的实例,可以理解为绑在了DOM结构上那如果我偏偏想调用的是这个子组件(弹出框)中的方法,但又不想要弹出框显示,怎么办呢?解决方法:把v-if换成v-show,这样DOM元素会一直存在于父组件中,子组件的方法也就能调用了 原文地址:https://www.cnblogs.com/zsg88/p/1099

Vue高版本中一些新特性的使用详解

一.深度作用选择器( >>> ) 严格来说,这个应该是vue-loader的功能."vue-loader": "^12.2.0" 在项目开发中,如果业务比较复杂,特别像中台或B端功能页面都不可避免的会用到第三方组件库,产品有时会想对这些组件进行一些UI方面的定制.如果这些组件采用的是有作用域的CSS,父组件想要定制第三方组件的样式就比较麻烦了. 深度作用选择器( >>> 操作符)可以助你一臂之力. 前端精品教程:百度网盘下载 ?

Vue 改变数组中对象的属性不重新渲染View的解决方案

在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到javascript的限制,Vue不能检测到对象属性的添加或删除,因为vue在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让vue转换它.但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上:如下代码: Vue.set(obj, '_isHover', true); 或

vue http请求 vue-resource使用方法

1.安装vue-resource扩展: npm install vue-resource 2.在main.js中引入 import http from 'vue-resource' 3.使用方法 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCa

Vuex内容解析和vue cli项目中使用状态管理模式Vuex

中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, acti

Vue在MVC中的进行前后端的交互

Vue在MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下个人使用Vue的一点经验,以便后来者借鉴! 官方文档:Vue.js 使用Vue在ASP.NET MVC中进行前后端交互在阅读下面的文章之前你需要先了解一下Vue官方推荐的前后端交互的插件: 1.resource(官方在2.0版本之后取消了对此插件的维护) 2.axios 注:这里使用的都是异步的插件,因为这样才会在

Vue把父组件的方法传递给子组件调用(评论列表例子)

Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue-2.4.0.js"></script> <link