使用 Vue 实现包含单选框的弹窗功能（附Demo）

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="showModal = false">&times;</span>
        <p>这是一个模态窗口</p>
        <label>
          <input type="radio" value="Option1" v-model="selectedOption"> Option 1
        </label>
        <label>
          <input type="radio" value="Option2" v-model="selectedOption"> Option 2
        </label>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showModal: false,
      selectedOption: ''
    };
  }
};
</script>
 
<style scoped>
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>

这段代码实现了一个简单的Vue组件，其中包含了一个弹窗和两个单选框。用户点击按钮后弹窗会显示，并且可以通过选择单选框来进行选择。选项变化会绑定到selectedOption数据属性上。点击关闭按钮会隐藏弹窗。这个例子展示了如何使用Vue.js创建一个基本的用户界面，并处理用户输入。