Question

我正在使用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>

Answer 1

这是在data方法内创建按钮的方法但要将其显示为HTML而非字符串，则需要将其添加到v-html属性内。注意：内容是作为纯HTML插入的-它们不会被编译为Vue模板，因此您应在mounted生命周期内添加事件侦听器。注意：我将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>

我希望你觉得它很满

如何从Vue中的数据部分创建按钮

1 个答案: