Vue JS - 如何使用单选按钮显示或隐藏元素答案

【问题标题】：Vue JS - How to show or hide an element using radio buttonsVue JS - 如何使用单选按钮显示或隐藏元素
【发布时间】：2021-08-11 01:52:02
【问题描述】：

我有两个单选按钮可以接受真或假，我想这样做，当您单击名为“一个”的单选按钮时，会出现该块，而当您单击“否”时，会隐藏该块我使用了这种方法

<template>
  <div>
    <div>
      <label
        >One
        <input type="radio" name="radio" value="true" v-model="websiteAccept" />
      </label>
      <label
        >No
        <input
          type="radio"
          name="radio"
          value="false"
          v-model="websiteAccept"
        />
      </label>
      <p>{{ websiteAccept }}</p>
    </div>

    <div v-if="websiteAccept" style="background: yellow">
      <p>Hide / Show block</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      websiteAccept: null,
    };
  },
};
</script>

但是这种方法在什么情况下不起作用，如果单击单选按钮时websiteAccept属性动态变化，则可能是它不起作用的原因

你也可以看到给定的code in codesandbox

【问题讨论】：

我认为您正在分配字符串“true”和“false”，而不是布尔原始值。尝试用“v-value”或简写“:value”替换“value”：这样您将传递引号内的实际值

标签： javascript vue.js vuejs2 boolean

【解决方案1】：

您需要绑定单选按钮value 属性，以便将它们作为布尔值而不是字符串处理：

   <div>
      <label
        >One
        <input type="radio" name="radio" :value="true" v-model="websiteAccept" />
      </label>
      <label
        >No
        <input
          type="radio"
          name="radio"
          :value="false"
          v-model="websiteAccept"
        />
      </label>
      <p>{{ websiteAccept }}</p>
    </div>

【讨论】：

【解决方案2】：

<template>
 <div>
   <div>
     <label
       >On
       <input type="radio" name="radio" :value="true" v-model="websiteAccept" />
     </label>
     <label
       >No
       <input
         type="radio"
         name="radio"
         :value="false"
         v-model="websiteAccept"
         @change="change"
       />
     </label>
     <p>{{ websiteAccept }}</p>
   </div>

   <div v-if="websiteAccept" style="background: yellow">
     <p>Hide / Show block</p>
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     websiteAccept: null,
   };
 },
};
</script>

使用这个:value。这将值设置为 BOOLEAN，您的代码将值设置为字符串。

【讨论】：