<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<div class="radio_btns">
<div class="form_radio_btn" @click="setValue('Наличными')">
<input id="radio-3" type="radio" name="pay_type" value="cash" checked>
<label for="radio-3">Наличными</label>
</div>
<div class="form_radio_btn">
<input id="radio-4" type="radio" name="pay_type" value="card" @click="setValue('Картой')">
<label for="radio-4">Картой</label>
</div>
</div>
<p>Выбрано: {{ value }}</p>
</div>
</template>
<script>
export default {
data() {
return {
value: 'Наличными'
};
},
methods: {
setValue(value) {
this.value = value;
}
}
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
a,
button {
color: #4fc08d;
}
button {
background: none;
border: solid 1px;
border-radius: 2em;
font: inherit;
padding: 0.75em 2em;
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.