vue 中拼接html时添加点击事件

本秂侑毒 提交于 2020-03-25 21:24:55
<main>
    <div ref="HTML"></div>
</main>
<script>
    created() {
        this.createHtml();
      },
      methods: {
          cesi1() {
            // 这里是因为v-html里的东西,调不到this.methods的东西,因为methods里的代码是编译后在浏览器里运行的,
            // 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
          alert("这里不会调用");
        },
        createHtml() {
         var str = `
            <ul>
              <li style="color:red" onclick="cesi1()">测试</li>
            </ul>
          `;
          this.$refs.HTML.innerHTML += str
          // 解决的方式有很多中大家可已自行百度,例如使用事件代理
          // 因为绑定的是原生事件本实例采纳的是以下解决方式
         function cesi1(){
             console.log('完美解决');
         }
        //  window.cesi1=function(){
        //      console.log('完美解决');
        //  }
        }

}

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!