vue中按钮的内容自适应

在Vue.js中，如果想让按钮的内容动态适应，可以利用组件的特性来实现。通常，你可以通过设置`v-bind:text`或者`v-html`指令来动态绑定按钮的文字内容。例如：

<template>
  <button v-bind:text="displayText">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      displayText: '默认文本', // 可以根据需求改变这个值
    };
  },
};
</script>

在这个例子中，当你在data中改变`displayText`的值，按钮的文字就会随之更新。

如果你想让按钮内容更复杂，比如包含HTML标签，那么可以使用`v-html`：

<template>
  <button v-html="contentWithHtml"></button>
</template>

<script>
export default {
  data() {
    return {
      contentWithHtml: '<span>这是一段带HTML的文本</span>',
    };
  },
};
</script>

记得处理好HTML安全问题，确保用户输入不会导致XSS攻击。