0๐
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>
Source:stackexchange.com