VueJS 如何通过选择不同的单选按钮来触发方法？

Question

我有一个简单的 VueJS 表单，在表单的开头有一个单选按钮组，其中包含三个不同的选项。表单的其余部分将根据此单选选项显示或隐藏。当我使用 @click 时，它并没有做我想要的确切事情。这是我的单选按钮；

                <div>
                <label class="form-radio">
                  <input type="radio" name="internetconnectiontype" id="dynmaicIP" value="dynamicIP">
                  <span><label>Dynamic IP</label></span>
                </label>

                <label class="form-radio">
                  <input type="radio" name="internetconnectiontype" id="staticIP" value="staticIP">
                  <span><label>Static IP</label></span>
                </label>

                <label class="form-radio">
                  <input type="radio" name="internetconnectiontype" id="pppoe" value="pppoe" checked>
                  <span><label>PPPoE</label></span>
                </label>
            </div>

在这些按钮之后，我有两个不同的组，换句话说就是两个不同的 div 来显示和隐藏。首先，如果选择Dynamic IP，会隐藏两个div，如果选择Static IP，那么只有第一个div可见，如果选择PPPoE，只会出现第二个div。

当我使用v-model 时，它会在我在收音机之间切换时给我值，之后我编写了一个方法，比如如果选择了这个值然后到那个，如果这个值被选择到那些等等......但它没有也不起作用，我创建了变量并将它们默认设置为 false 并尝试在 true 和 false @change 之间切换它们，但我无法管理。我该怎么做？

Answer 1

var app = new Vue({
  el: '#app',
  data() {
    return {
      connType: "",
    };
  },
})

body{
margin: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
      <label class="form-radio">
        <input
          type="radio"
          name="internetconnectiontype"
          id="dynmaicIP"
          value="dynamicIP"
          v-model="connType"
        />
        <span><label>Dynamic IP</label></span>
      </label>

      <label class="form-radio">
        <input
          type="radio"
          name="internetconnectiontype"
          id="staticIP"
          value="staticIP"
          v-model="connType"
        />
        <span><label>Static IP</label></span>
      </label>

      <label class="form-radio">
        <input
          type="radio"
          name="internetconnectiontype"
          id="pppoe"
          value="pppoe"
          v-model="connType"
        />
        <span><label>PPPoE</label></span>
      </label>
    </div>
    <div v-if="connType === 'dynamicIP'">
      {{ connType }}
    </div>
    <div v-else-if="connType === 'staticIP'">
      {{ connType }}
    </div>
    <div v-else-if="connType === 'pppoe'">
      {{ connType }}
    </div>
    <div v-else>Please select</div>
  </div>
</div>