vue点击按钮显示内容

你可以通过在Vue模板中添加一个按钮，然后在按钮上绑定一个点击事件，在事件处理函数中更新Vue实例的数据，从而显示内容。

下面是一个简单的示例代码：

<template>
  <div>
    <button @click="showContent">显示内容</button>
    <p v-show="contentVisible">{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是要显示的内容',
      contentVisible: false
    }
  },
  methods: {
    showContent() {
      this.contentVisible = true
    }
  }
}
</script>

在上面的代码中，我们首先在模板中添加了一个按钮，并给它绑定了一个`showContent`方法。在这个方法中，我们将`contentVisible`变量设置为`true`，从而显示内容。同时，我们使用Vue的`v-show`指令来控制内容的显示和隐藏。当`contentVisible`为`true`时，内容会被显示出来，否则会被隐藏起来。

希望这个示例能够帮助你实现点击按钮显示内容的功能。

相关问题

vue点击按钮出现文字

你可以在Vue组件中使用v-on指令来监听按钮的点击事件，并使用数据绑定来控制文字的显示。

首先，在Vue组件的template中，添加一个按钮和一个用于显示文字的元素，如下所示：

<template>
  <div>
    <button v-on:click="showText">点击我</button>
    <p v-if="isShow">{{ text }}</p>
  </div>
</template>

其中，v-on指令用于监听按钮的点击事件，当按钮被点击时，会调用showText方法。v-if指令用于控制是否显示文字。

接着，在Vue组件的script中，定义showText方法和相关数据，如下所示：

<script>
export default {
  data() {
    return {
      isShow: false,
      text: 'Hello World!'
    }
  },
  methods: {
    showText() {
      this.isShow = true;
    }
  }
}
</script>

其中，data函数返回了一个包含isShow和text两个属性的对象，分别表示是否显示文字和要显示的文字内容。showText方法将isShow属性设置为true，从而显示文字。

这样，当你点击按钮时，文字就会出现在页面上了。