vue alert

// 使用 Vue 和 JavaScript 实现一个简单的 alert 组件

<template>
  <div>
    <button @click="showAlert">点击显示 Alert</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      alertVisible: false,
    };
  },
  methods: {
    showAlert() {
      this.alertVisible = true;
      alert('这是一个 Vue Alert!');
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个按钮，点击时会触发 showAlert 方法。

2. 脚本部分 (<script>):

   • 定义了一个 data 函数，返回一个对象，其中包含一个布尔值 alertVisible，用于控制是否显示 Alert。
   • methods 中定义了 showAlert 方法，当按钮被点击时，会将 alertVisible 设置为 true 并弹出一个浏览器的 alert 对话框。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加样式，这里没有具体的样式内容。

这个示例展示了如何在 Vue 中使用原生的 alert 函数来实现一个简单的弹窗提示。如果你想要更复杂的弹窗功能，可以考虑使用第三方库如 vue-sweetalert2 或者自己编写组件。