在vue 的html拼接在添加点击事件用原生的onclick来触发事件,将事件挂在window上

html模板

<template>
  <div class="layout1">
        <div class="layout" id="layout">
        </div>
     </div>
</template>

<script>
import $ from 'jquery'
export default {
   mounted () {
      this.getData();
   },
  methods: {
     getData(){
                var html = "";
                let id = [1,2,3],name = ['小A','小B','小C'];
                for (var i = 0; i < 3; i++) {
                html += '<el-button  onclick="get_info('+id[i]+',\''+name[i]+'\')" >'+ name[i] + '</el-button>';
                }
                $(".layout").append(html)
               
            
         window.get_info = function(id,name) {
          console.log(id)
          console.log(name)
         }
        }
     }
  }
</script>

结果:
在这里插入图片描述
点击小A,取到了值
在这里插入图片描述
总结:vue拼接html点击事件使用onclick事件。
1.不带参数 onclick = “get_info()”
2.带参数onclick = “get_info(’+id[i]+’)”
3.如果参数是字符串,需要用转义字符 onclick = “get_info(’’+name[i]+’’)”

Logo

前往低代码交流专区

更多推荐