想在这三个按钮上绑定不同事件, 使用v-for 循环一次生成

<template>
<div class="index_container">
  首页
  <v-container>
    <v-row>
      <v-col v-for="btnText in btnTexts" :key="btnText.v">
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn @click="StrToFunc(btnText.c)"  v-bind="attrs"
                   v-on="on" > {{btnText.v}}} </v-btn>
          </template>
          <span>{{btnText.v}}</span>
        </v-tooltip>
      </v-col>
    </v-row>
  </v-container>
  </div>
</template>

<script>
// import { getItem, setItem, removeItem } from '@/utils/storage'
export default {
  name: 'Index.vue',
  data () {
    return {
    // 数据源  c 为事件名称
      btnTexts: [
        { v: '获取localStarage', c: 'getValue' },
        { v: '设置localStarage', c: 'setValue' },
        { v: '移除localStarage', c: 'removeValue' }
      ]
    }
  },
  methods: {
  // 关键代码
    StrToFunc (funcName) {
      this[funcName]()
    },
    setValue () {
      console.log('设置')
    },
    getValue () {
      console.log('获取')
    },
    removeValue () {
      console.log('删除')
    }
  }
}
</script>

<style scoped>

</style>




以下是关键代码:

<view class="btnBox">
    <view v-for="(item, index) in pageObj.btnList" :key="index">
      <view class="page__bd">
        <view class="page__bd page__bd_spacing title__bd walltBtnBox">
					<image :src="walletImg[index]" class="walletImg"></image>
          <button class="weui-btn walltBtn" @tap="tapClick(item.bindtap,{id:index})">{{item.name}}</button>
					<view class="rightArrow arrowPosition"></view>
        </view>
      </view>
    </view>
  </view>

    //data    
    btnList:[
        {
             bindtap:'one'
        },
        {
             bindtap:'two'
        }
    ]

	//methods
    
    tapClick(tap,params){   //循环使用不同点击事件
			this[tap](params)
	},

    one(e){
        console.log("id是:",e.id)
        console.log("one")
    },
    two(e){
        console.log("id是:",e.id)
        console.log("two")
    }

 

场景：在v-for循环出来的元素中，有时候不同的元素需要绑定包不同的元素，例如按键，按钮之类的元素，需要在循环出来的元素中循环出不同的事件。

例如下图中按不同的按钮要执行不同的指令



解决方案：利用数据中的编号，为不同的按钮绑定不同的事件方法名称，然后在函数中定义出监听事件，然后给不同的事件绑定相应的方法。

数据：
 data() {
            return {
                items: [{
                    id: '001',
                    title: '当前电压值',
                    styl: '220V',
                    num: '1'
                }, {
                    id: '002',
                    title: '当前开关状态',
                    styl: '开',
                    num: '2'
                }]
            }
        },

模板：
<template>
    <div>
        <div v-for="item in items" class="block">
            <p class="main-word">{{item.title}}:{{item.styl}}</p>
            <button id="dianya1" type="button" class="btn btn-info butt" @click="jinggao(item.num)">更新</button>
        </div>
    </div>
</template>

方法：
methods: {
            jinggao(methodsNums){
                this[methodsNums]()
            },
            1() {
                alert('电压指令已发出');
            },
            2() {
                alert('状态指令已发出');
            }
        }

效果：





完整代码：
<template>
    <div>
        <div v-for="item in items" class="block">
            <p class="main-word">{{item.title}}:{{item.styl}}</p>
            <button id="dianya1" type="button" class="btn btn-info butt" @click="jinggao(item.num)">更新</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Zhuangtai",
        data() {
            return {
                items: [{
                    id: '001',
                    title: '当前电压值',
                    styl: '220V',
                    num: '1'
                }, {
                    id: '002',
                    title: '当前开关状态',
                    styl: '开',
                    num: '2'
                }]
            }
        },
        methods: {
            jinggao(methodsNums){
                this[methodsNums]()
            },
            1() {
                alert('电压指令已发出');
            },
            2() {
                alert('状态指令已发出');
            }
        }
    }
</script>

vue中给v-for循环出来的元素绑定不同的事件

html：
   <div style="padding: 0 5px;" @click="handler(item.fun)" v-for="(item, index) in iconData" :key="index">
    <i class="iconfont  iconHover" :class="item.icon" :title="item.title"></i>
   </div>

js：
      iconData: [
        { icon: 'iconquanxuan', title: '全选', fun: 'checkAll' },
        { icon: 'iconfanxuan', title: '反选', fun: 'toggleAll' },
        { icon: 'iconzhongzhi', title: '重置', fun: 'cancleAll' }
      ]

    handler(fun) {
      this[fun]()
    },
    checkAll() {
      this.checkedList = [...this.Options]
      viewer.bimAdmin.tools['Bim.TilesetModelList'].toggleAllOff()
    },
    cancleAll() {
      this.checkedList = []
      viewer.bimAdmin.tools['Bim.TilesetModelList'].toggleAllOn()
    },
    toggleAll() {
      //反选
      this.checkedList = this.Options.filter(a => this.checkedList.indexOf(a) === -1)
      viewer.bimAdmin.tools['Bim.TilesetModelList'].toggleAll()
    },