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

Question

我有两个接受 true 或 false 的单选按钮，我想这样做，当您单击名为“One”的单选按钮时，块出现，当您单击“No”时，块被隐藏为此，我使用了这种方法

<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

Answer 1

<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，您的代码将值设置为字符串。

Answer 2

您需要绑定单选按钮 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>

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

Vue JS - How to show or hide an element using radio buttons

javascript

boolean

vue.js

vuejs2