Question

我想使用单选按钮，所以每次我选择一个表单更改时，我尝试使用简单的 html 代码，但我喜欢使用 Ant design vue 来做。这是我现在拥有的代码，我想用 antdv 制作它..

<input type="radio" v-model="z" value="x" > <span>Xx</span> 
<input type="radio" v-model="z" value="y" > <span>Yy/span>

<div v-if="z === 'x'"> /*some code here for form n1*/</div>
<div v-if="z === 'y'"> /*some code here for form n2*/</div>
data(){
return {
z:'x'}
 },

Answer 1

代码有效，您可能需要解释您遇到的问题

Vue.createApp({
  data() {
    return {
      z: 'x'
    }
  },
}).mount("#app")

label{display:block;margin:0.5em;}

<script src="https://unpkg.com/vue@3.0.7/dist/vue.global.prod.js"></script>

<div id="app">
  <label><input type="radio" v-model="z" value="x" >Xx</label>
  <label><input type="radio" v-model="z" value="y" >Yy</label>
  <pre>{{ {z} }}</pre>
  <div v-if="z === 'x'"> /*some code here for form n1*/</div>
  <div v-if="z === 'y'"> /*some code here for form n2*/</div>
</div>

VueJS 动态表单使用蚂蚁设计单选按钮

1 个答案: