Vue给每个v-for的元素设置不同的点击事件

给每一个不同的点击事件

思路：data中的v-for依赖的对象中在添加一个属性，属性值分别设置，然后在方法中去写各自的方法，当点击事件触发时，调用相对应的方法。但不适用于数据量太大，v-for生成的元素太多

 <template><ul><li v-for="(item,index) in lists" :key="index" @click="getLists(item.method)">{{item.title}}</li></ul></div>
</template>
<script>
export default {name: 'Home',data () {return {lists:[{title:'第一个元素',method:'item1'},{title:'第二个元素',method:'item2'},{title:'第三个元素',method:'item3'}]}},methods:{getLists:function(itemMethods){this[itemMethods]();},item1:function(){console.log("I am item1's method")},item2:function(){console.log("I am item2's method")},item3:function(){console.log("I am item3's method")}}
}

Vue给每个v-for的元素设置不同的点击事件相关推荐

iOS小技能：设置tableView的点击事件优先级低于cell的选中事件（场景：比如筛选视图，监听蒙版的点击事件就隐藏筛选视图）
文章目录前言 I 设置tableView的点击事件优先级低于cell的选中事件 1.1 应用场景 1.2 利用cancelsTouchesInView属性进行实现 1.3 其他方式控制事件的传递 I ...
设置html按钮点击事件无效果,css怎么设置按钮不能点击？
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...
设置html按钮点击事件失效
想要按钮不能点击可以通过设置按钮点击事件失效来实现:而在CSS中,可以使用pointer-events属性来实现点击事件失效. pointer-events属性除了指示该元素不是鼠标事件的目标之外,值 ...
DevExpress的图形按钮菜单栏控件WindowsUIButtonPanel的布局、使用和设置按钮的点击事件
场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...
禁用，元素设置为不可点击
如下所示,給div添加了以下样式后,div里面所有的点击事件都不会触发 <div style="pointer-events: none;"><a href=&q ...
vue项目引入容联七陌客服系统(qimoChatClick点击事件的使用)
前端接入客服步骤第一步.引入链接第二步.对客服按钮进行显示隐藏处理获取到元素再进行修改即可,若是原生按钮,按照如下代码设置即可. let qimoDom = document.getElemen ...
Android视图绑定，设置控件点击事件不生效
我遇到的问题是: setContentView(R.layout.acitivty_main); setContentView(mainBinding.getRoot); 应该使用下面的来绑定布局,不 ...
CSS实现鼠标不可点击，样式设置以及不可点击事件的行为
鼠标不可点击主要是两种表现: 1.鼠标不可点击时的显示状态 cursor: not-allowed 2.鼠标原有的事件不能实现 pointer-events:none
在XML布局里给View设置点击事件
给一个View设置监听点击事件是再普通不过的事情,比如 view.setOnClickListener(onClickListener); 另外一种做法是直接在XML布局里面指定View点击时候的回调 ...

Vue给每个v-for的元素设置不同的点击事件

给每一个不同的点击事件

Vue给每个v-for的元素设置不同的点击事件相关推荐

最新文章

热门文章