vuejs 设置一个单选按钮检查语句是不是为真

Posted 2023-02-22

【中文标题】vuejs 设置一个单选按钮检查语句是不是为真

【英文标题】：vuejs set a radio button checked if statement is truevuejs 设置一个单选按钮检查语句是否为真

【发布时间】：2016-04-24 06:01:23

【问题描述】：

我正在尝试使用 vuejs v-for 仅在我的 if 语句为真时检查单选按钮。有没有办法使用 vuejs 的 v-if/v-else 来解决这类问题？

在 php 和 html 中，我可以通过执行以下操作来实现：

<input type="radio" <? if(portal.id == currentPortalId) ? 'checked="checked"' : ''?>>

以下是我目前使用 vuejs 所做的：

    <div v-for="portal in portals">
     <input type="radio" id="portal.id" name="portalSelect"
       v-bind:value="id: portal.id, name: portal.name"
       v-model="newPortalSelect"
       v-on:change="showSellers"
       v-if="portal.id == currentPortalId"
       checked="checked">
     <label for="portal.id">portal.name</label>
    </div>

我知道这里的 v-if 语句用于检查是否显示或隐藏输入。

非常感谢任何帮助。

【参考方案1】：

以下是跟踪所选单选按钮的示例，通过

将值绑定应用到对象 (:value="portal") 和 将 v-model 绑定应用到当前选定的对象 (v-model="currentPortal")。

当两者匹配时，单选按钮将由 Vue 自动检查（不需要:checked 绑定！）。

带有组合 API 的 Vue 3

Vue.createApp(
  setup() 
    const portals = [
      id: 1,
      name: "Portal 1"
    , 
      id: 2,
      name: "Portal 2"
    ];
    
    const currentPortal = portals[1];
    
    return 
      portals,
      currentPortal
    
  
).mount("#app");

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <template v-for="portal in portals">
    <input 
      type="radio" 
      :id="portal.id"
      name="portalSelect" 
      :value="portal" 
      v-model="currentPortal">

    <label :for="portal.id">portal.name</label>
  </template>
</div>

【参考方案2】：

如果您可以根据自己的逻辑进行调整，则可以遵循以下选项：

<div class="combination-quantity">
    <input type="radio" value="Lost" 
    v-model="missing_status">
    <label for="lost">Lost</label>
    <br>
    <input type="radio" value="Return Supplier" v-model="missing_status">
    <label for="return_supplier">Return Supplier</label>
</div>

missing_status 的值可以是“丢失”或“返回供应商”，并且会根据值自动选择单选选项。

【参考方案3】：

也许有人觉得这种方法有用：

在模板中，我为每个单选按钮分配一个值：

<input type="radio" value="1" v-model.number="someProperty">
<input type="radio" value="2" v-model.number="someProperty">

然后在组件中我设置值，即：

data: function () 
    return 
        someProperty: 2
    

在这种情况下，vue 将选择第二个单选按钮。

【参考方案4】：

在处理无线电和 vue.js 时，我想指出一些选项。通常，如果您需要动态绑定属性值，您可以使用速记绑定语法来绑定并计算该值。您可以绑定到数据、计算值或方法以及三者的组合。

new Vue(
  el: '#demo',
  data() 
    return 
      checkedData: false,
      checkedGroupVModel: "radioVModel3", //some defaul
      toggleChecked: false,
      recalculateComputed: null
    ;
  ,
  computed: 
    amIChecked() 
      let isEven = false;
      if (this.recalculateComputed) 
        let timeMills = new Date().getMilliseconds();
        isEven = timeMills % 2 === 0;
      
      return isEven;
    
  ,
  methods: 
    onToggle() 
      this.toggleChecked = !this.toggleChecked;
      return this.toggleChecked;
    ,
    mutateComputedDependentData() 
      this.recalculateComputed = ;
    
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="demo">
  <div>
    <div>
      <span>Simple Radio Group - Only one checked at a time. Bound to data.checkedData</span><br>
      <label>Radio 1 - inverse of checkedData = !checkedData
        <input type="radio" name="group1" value="radio1" :checked="!checkedData">
      </label><br>
      <label>Radio 2 - checkedData = checkedData
        <input type="radio" name="group1" value="radio2" :checked="checkedData">
      </label><br>
      <span>Understanding checked attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-checked</span>
    </div>
    <br>
    <div>
      <span>Simple Radio - Checked bouned to semi-random computed object</span><br>
      <label>Radio 1: amIChecked
        <input type="radio" :checked="amIChecked">
      </label> &nbsp;
      <label>Recalculate Computed Value
        <button type="button" @click="mutateComputedDependentData">Click Me Several Times</button>
      </label>
    </div>
    <br>
    <div>
      <span>Simple Radio Group - v-model bound value = checkedGroupVModel</span><br>
      <label>Simple Radio 1:
        <input type="radio" name="vModelGroup" value="radioVModel1" v-model="checkedGroupVModel">
      </label><br>
      <label>Simple Radio 2:
        <input type="radio" name="vModelGroup" value="radioVModel2" v-model="checkedGroupVModel">
      </label><br>
      <label>Simple Radio 3:
        <input type="radio" name="vModelGroup" value="radioVModel3" v-model="checkedGroupVModel">
      </label>
    </div>
    <br>
    <div>
      <span>Simpe Radio - click handler to toggle data bound to :checked to toggle selection</span><br>
      <label>Toggle Radio = toggleChecked
        <input type="radio" :checked="toggleChecked" @click='onToggle()'>
      </label>
    </div>
  </div>
</div>

【参考方案5】：

您可以像这样绑定checked 属性：

<div v-for="portal in portals">
  <input type="radio"
         id="portal.id"
         name="portalSelect"
         v-bind:value="id: portal.id, name: portal.name"
         v-model="newPortalSelect"
         v-on:change="showSellers"
         :checked="portal.id == currentPortalId">

  <label for="portal.id">portal.name</label>
</div>

简单示例：https://jsfiddle.net/b4k6tpj9/

【讨论】：

@Bharat 我认为 jsfiddle 只是为了表明上述问题归结为了解绑定到诸如选中的属性的能力。这是速记的文档：v1 - v1.vuejs.org/guide/syntax.html#Shorthands v2 - vuejs.org/v2/guide/syntax.html#Shorthands