精华内容
下载资源
问答
  • 想在这三个按钮上绑定不同事件, 使用v-for 循环一次生成 <template> <div class="index_container"> 首页 <v-container> <v-row> <v-col v-for="btnText in btnTexts" :key=...

    在这里插入图片描述

    想在这三个按钮上绑定不同事件, 使用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>
    
    
    
    

    以下是关键代码:在这里插入图片描述
    在这里插入图片描述

    展开全文
  • {{item.name}} //data btnList:[ { bindtap:'one' }, { bindtap:'two' } ] //methods tapClick(tap,params){ //循环使用不同点击事件 this[tap](params) }, one(e){ console.log("id是:",e.id) console.log(...
    <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循环出来的元素中,有时候不同的元素需要绑定包不同的元素,例如按键,按钮之类的元素,需要在循环出来的元素中循环不同事件。 例如下图中按不同的按钮要执行不同的指令 解决方案:利用数据中的...

    场景:在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=...

    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()
        },
    
    展开全文
  • 同一个for循环列表,绑定不同的点击事件</h3> <div class="list" v-for="(item,index) in items" :key="index"> <p>{{item.title}}:{{item.styl}}</p> <button type="button" @click=...
  • vue官网编程式导航
  • 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter...这里需要注意的是不同浏览器在控制台打印数据对象时对 get...
  • 什么是 vue 生命周期vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。八个阶段:1...
  • 线程:线程则是进程内的一个独立执行单元,在不同的线程之间是可以共享进程资源的,是进程内可以调度的实体。比进程更小的独立运行的基本单位。线程也被称为轻量级进程。 简单讲,一个进程可由多个线程构成,线程是...
  • for更新已经渲染过的元素列表时,默认用“就地复用”策略,如果数据项的顺序被改变,Vue.js将不会移动Dom元素来匹配数据项的顺序,就如在数组的尾部和数组的头部插入一个新的元素,所产生的的key值就会不同。...
  • 下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的,因为题型较多,拿单选题型为大家演示:不同题型它的界面也是不同的,这里也有个技术点,这里就先不讲解了。 如动图所示,要完成这样的功能,...
  • 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。 -声明式渲染 <div> {{ message }} </div> data(){ return{ message:'Hellow Vue', } }, 看起来这跟渲染一个字符串模板非常类似...
  • VUE—v-for循环动态绑定不同的函数方法 第一步:在v-for循环的data里写方法名,我这里有三个方法名 第二步:v-for循环时click事件绑定不同的函数方法 <ul> <li v-for="(item, index) in datafieldset" @...
  • 一个title 处 可能有 一个或多个按钮, 按钮对应不同的响应事件 二. 思路 : 按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定 三. 封装组件 1. 视图层面 2. 代码部分 2.1 结构...
  • 秋招面试被问到这个问题,查了很多文章,比较零散,所以自己集百家之长,做个整理 什么是事件事件事件就是由于某种外在或...而根据上下文的不同,Event loop也有不同的实现:其中Node使用了libuv库来实现Event l
  • vue到小程序注意的HTML循环if改变item和index名字绑定事件点击传参data中数据跳转非Tabbar HTML div => view span =>text img =>image 循环 wx:for="{{}}" if wx:if="{{}}" 改变item和index名字 wx:for-...
  •  一个title 处 可能有 一个或多个按钮, 按钮对应不同的响应事件 二. 思路 :  按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定 三. 封装组件   1. 视图层面 2. 代码...
  • Vue-循环遍历选项赋值到对应控件

    千次阅读 多人点赞 2020-06-19 19:51:13
    下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的,因为题型较多,拿单选题型为大家演示:不同题型它的界面也是不同的,这里也有个技术点,这里就先不讲解了。 如动图所示,要完成这样的功能,...
  • 主要介绍了vue 父组件调用子组件方法及事件的相关资料,父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.怎么实现这样一个功能呢?接下来跟随脚本之家小编一起看看吧
  • 这篇文章主要介绍了vue 父组件调用子组件方法及事件的相关资料,父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.怎么实现这样一个功能呢情景:父组件中引入上传附件的子组件:点击组件可以分别...
  • ‘复制和删除’是两个循环出来的元素,兄弟之间可以切换背景色,然后个自点击以后layer不同,就需要绑定不同事件 这样我们可以把逻辑写在一个函数里面,这样就会用到index 部分代码: 1、我们在data里面声明一...
  • 本文实例为大家分享了Vue点击显示不同图片的具体代码,供大家参考,具体内容如 使用Vue中的以下知识点来显示效果 ①:v-for:循环遍历数据 ②:v-bind:class={ }:绑定样式 ③:v-on:click(简写@click):点击事件 ...
  • Vue点击显示不同的图片

    千次阅读 2019-02-26 18:14:13
    *使用Vue中的以下知识点来显示效果 ①:v-for:循环遍历数据 ②:v-bind:class={ }:绑定样式 ③: v-on:click(简写@click):点击事件 ④: v-if:判断 &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &...
  • vue v-for循环列表,点击每一项,根据服务器传的id值,在同一页面渲染不同的数据 问题起源: 这几天在练习vue项目,其中vue-router的作用,在整个项目中起着至关重要的作用,其中包括一级路由的跳转、二级路由的跳转...

空空如也

空空如也

1 2 3 4
收藏数 74
精华内容 29
关键字:

vue循环不同事件

vue 订阅