随着web应用程序的发展，用户交互变得越来越重要。vue是一种流行的javascript框架，用于构建现代web应用程序。在vue中，我们可以很容易地添加交互性，例如在点击按钮时显示一张图片。本文将介绍vue中如何实现这一功能。
首先，我们需要准备一张图片。这里我们以一张名为“example.jpg”的图片为例。将图片放置在Vue应用程序的静态文件夹中（通常是“public”文件夹），如下所示：
/public/images/example.jpg
接下来，我们需要创建一个Vue组件，并在其中添加一个按钮和一个图像元素。在这个例子中，我们将使用Vue单文件组件（SFC）：
在这个组件中，我们定义了一个数据属性“show”，它是布尔类型的。在开始时，我们将它的值设为“false”，因为默认情况下我们不想显示图片。当用户点击按钮时，我们将调用一个名为“showImage”的方法，它将更新数据属性“show”的值以显示图片。
图片元素被添加了一个“v-if”指令，用于根据需要显示或隐藏它。它的值是表达式“show”，这意味着只有在“show”为true时才会显示图片。
立即学习“前端免费学习笔记（深入）”；
最后，我们导出这个组件并将其包含在我们的Vue应用程序中。这可以在Vue实例中完成，如下所示：
Vue显示图片示例
在这个Vue实例中，我们将组件“image-display”包含在一个名为“app”的div元素中。我们还导入了我们的Vue组件，并将其作为组件选项对象中的属性传递给Vue实例，以便作为Vue应用程序的一部分加载。
现在，当用户单击显示图片按钮时，我们的Vue应用程序将显示“example.jpg”图片。这是一个基本的Vue交互示例，可以帮助您在自己的Web应用程序中添加交互性。
