vue动态添加事件+动态触发事件方法

<body><div id="app"><button @[n.value]="doEvent(n.value)" v-for="(n,i) of eventList" :key="i">{{n.name}}</button></div><script src="./vue.js"></script><scr

homecrane

5252人浏览 · 2022-01-29 14:56:00

homecrane · 2022-01-29 14:56:00 发布

<body>
    <div id="app">
        <button @[n.value]="doEvent(n.value)" v-for="(n,i) of eventList" :key="i">{{n.name}}</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello Vue!',
                eventList:[
                    {
                        name:'鼠标点击',
                        value:'click'
                    },
                    {
                        name:'鼠标移动到',
                        value:'mouseover'
                    },
                    {
                        name:'鼠标移动走',
                        value:'mouseout'
                    }
                ]
            },
            methods:{
                doEvent(func){
                    this[func](func)
                },
                click:function(func){
                    console.log(func)
                },
                mouseover:function(func){
                    console.log(func)
                },
                mouseout:function(func){
                    console.log(func)
                }
            }
        })
    </script>
</body>

l用于动态触发不同js事件，或者同一事件动态触发不同方法

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^