时间戳

首页 > 解决方案 > 如何从 vue 中的数据部分创建按钮

vue.js - 如何从 vue 中的数据部分创建按钮

问题描述

我正在使用 vuejs 并希望创建一个在数据部分中声明的可点击按钮。我怎样才能做到这一点？

<template>
    {{my_btn}}
</template>
<script>
    export default {
        data() {
            return {
                my_btn: '<button class="btn btn-indigo outline" @click="sayhello">VISIT OUR WEBSITE</button>'
            }
        },
         methods: {
           sayhello(){
              alert('hello');
           }
         }
    }
</script>

标签： vue.js

解决方案

这是在方法中创建按钮的data方法，但要将其显示为 HTML 而不是字符串，您需要将其添加到v-html属性中。注意：内容是作为纯 HTML 插入的——它们不会被编译为 Vue 模板，所以你应该在 mountedLifecycle 中添加事件监听器。注意：我添加id到您的文本中，因此我将能够获取元素并添加事件侦听器

<template>
  <div>
    <span v-html="my_btn"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      my_btn:
        '<button id="btn" class="btn btn-indigo outline">VISIT OUR WEBSITE </button>'
    };
  },
  methods: {
    sayhello() {
      alert("hello");
    }
  },
  mounted() {
    document.getElementById("btn").addEventListener("click", this.sayhello)

  }
};
</script>

最后，您可以通过vue避免在您的网站上呈现任意 HTML 的风险来做到这一点，因为它可能非常危险，很容易导致XSS attacks.

<template>
    <div>
        <button class="btn btn-indigo outline" @click="sayhello">VISIT OUR WEBSITE
        </button>
    </div>
</template>
<script>
    export default {
        data() {
            return {

            }
        },
         methods: {
           sayhello(){
              alert('hello');
           }
         }
    }
</script>

我希望你能找到它。

推荐阅读