<div class="place"> 发生地: <label style="margin-right: 20px;"> <input type="radio" name="placeOccurrence" checked v-model="eventsRadio" value="0"> 地面 </label> <label> <input type="radio" name="placeOccurrence" v-model="eventsRadio" value="1"> 空中 </label> </div>代码中根据详情返回的数据,如何渲染label的值
时间: 2024-02-14 19:07:47 浏览: 54
原生javascript自定义input[type=radio]效果示例
你可以使用 Vue.js 的数据绑定功能来渲染 label 的值。首先,在 Vue 实例中定义一个数据属性,例如 `placeOccurrence`,然后将其绑定到 label 标签的 for 属性,如下所示:
```html
<div class="place">
发生地:
<label style="margin-right: 20px;" for="placeOccurrenceGround">
<input type="radio" id="placeOccurrenceGround" name="placeOccurrence" checked v-model="placeOccurrence" value="0"> 地面
</label>
<label for="placeOccurrenceAir">
<input type="radio" id="placeOccurrenceAir" name="placeOccurrence" v-model="placeOccurrence" value="1"> 空中
</label>
</div>
```
在这里,我们使用 `v-model` 指令将表单输入与数据属性 `placeOccurrence` 绑定。然后,我们将 label 标签的 for 属性设置为相应的输入元素的 id 值,并使用插值语法将数据属性 `placeOccurrence` 绑定到 label 标签的文本内容中:
```html
<label for="placeOccurrenceGround">
<input type="radio" id="placeOccurrenceGround" name="placeOccurrence" checked v-model="placeOccurrence" value="0">
{{ placeOccurrence === '0' ? '地面' : '空中' }}
</label>
```
这样,当用户选择不同的选项时,label 标签的文本内容将自动更新。
阅读全文