更改Vue js中单选按钮的样式

Question

如何在 vue.js 中更改单选按钮的样式，将单选按钮和按钮的标签合并在一起。我试图根据此链接简单单选按钮样式更改它，但我无法更改它。下面是代码

<div id="product">
    <h4>{{$translate('options')}}</h4>
        <div v-for="(a,key,index) in attribute">
            <h5>{{a}}</h5>
            <v-radio-group small row v-model="selected[index]">
                <v-radio :label="v" :value="v" v-for="v in options['V'+(index+1)]" :key="v"></v-radio>
            </v-radio-group>
        </div>

我想用这种样式的按钮制作它

对这种风格

我真的希望有办法解决这个问题，我想从我的错误中吸取教训，因为我还在学习 vue js

Answer 1

您可以使用 av-for来呈现任何 HTML 代码。它不必是 Vue 单选按钮...

在这种情况下，您需要为每个单选按钮创建一个包装器。通常我建议将输入包装在标签内，以便整个内容变得可点击。以下示例将为您提供许多样式机会。

<label class="radio">
   <input type="radio" name="group"/>
   <span>Label Text</span>
</label>

所以在 VUE 中你需要这样的东西：

<label v-for="opt in options" v-bind:key="opt.value">
   <input type="radio" v-model="opt.checked" value="opt.value" name="opt.groupName" />
   <span v-html="opt.value"></span>
</label>

浏览器的默认 CSS 应该呈现如下内容：

[ ] 标签文本

现在我有更多时间来介绍如何进行造型。

假设您像我一样设法使 HTML 结构化，那么您有很多选择。为了完成这项工作，您将在adjacent sibling选择单选按钮时使用选择器进行更改。此外，由于样式单选按钮本身很困难，我们将隐藏它并使用其状态来确定应该发生什么。

<label class="radio">
   <input type="radio" name="group"/>
   <span>Label Text</span>
</label>

<label v-for="opt in options" v-bind:key="opt.value">
   <input type="radio" v-model="opt.checked" value="opt.value" name="opt.groupName" />
   <span v-html="opt.value"></span>
</label>