在 Vue 3 中使用单选按钮显示或隐藏 div

Question

在我的 Vue 3.0.5 应用程序 中，我想通过单选按钮在 <div> 个元素之间切换，即一次只显示一个元素。如果我在输入元素中的 value 参数前面加上 v-bind，它会起作用，尽管我已经用 v-model 分配了值。但是，我不明白为什么。

我还使用单选按钮 select 来获得 ascending/descending 订单（我实现了一个 computed 排序函数，它使用 asc/desc 的变量）：这有效没有 v-bind.

我不清楚行为为何不同。谁能解释一下？

示例 v-bind

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.0.5"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <label><input type="radio" v-model="showFirst" v-bind:value="true" checked />First View</label>
        <br />
        <label><input type="radio" v-model="showFirst" v-bind:value="false" />Second View</label>
      </div>
      {{ showFirst }}

      <div v-if="showFirst">First view</div>
      <div v-else>Second view</div>
    </div>

    <script>
      var app = Vue.createApp({
        data() {
          return {
            showFirst: true,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>

示例没有 v-bind

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.0.5"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <label><input type="radio" v-model="showFirst" value="true" checked />First View</label>
        <br />
        <label><input type="radio" v-model="showFirst" value="false" />Second View</label>
      </div>
      {{ showFirst }}

      <div v-if="showFirst">First view</div>
      <div v-else>Second view</div>
    </div>

    <script>
      var app = Vue.createApp({
        data() {
          return {
            showFirst: true,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>

Answer 1

v-model 是 :modelValue="" 和 @update:modelValue="" 的双向绑定 shorthand。在 Vue 2 中，它曾经是 :value="" 和 @input=""。您应该只使用 v-model 或另一个。

当您添加属性 value="true" 时，这意味着您将字符串 "true" 作为值传递给组件。在 value 之前使用冒号时，您传递了一个计算结果为一个值的表达式。所以，添加 :value="true" 实际上传递给被评估的表达式，它是一个布尔值（它也可以是一个变量，一个计算等）。 v-bind: 等于一个冒号 :，通常使用缩写

另见 docs to v-model from Vue。

Answer 2

问题不在于您没有绑定该值，而是该值未设置为布尔值。如果您使用 v-bind 然后它会转换为布尔值。

所以你应该使用v-bind:value="true"（或shorthand`:value="true"）

否则，你可以 v-if="showFirst === 'true'" 或者，为了好玩，使用数字值进行创意（输入：value="0" 然后 v-if：Boolean(parseInt(showFirst))

例子

  var app = Vue.createApp({
    data() {
      return {
        showFirst: true,
      };
    },
  });

  app.mount("#app");

<script src="https://unpkg.com/vue@3.0.5"></script>
<div id="app">
  <div>
    <label><input type="radio" v-model="showFirst" value="true" />First View</label
    ><br />
    <label><input type="radio" v-model="showFirst" value="false" />Second View</label>
  </div>
  {{ showFirst }}

  <div v-if="showFirst === 'true'">First view</div>
  <div v-else>Second view</div>
</div>

在 Vue 3 中使用单选按钮显示或隐藏 div

Use radio button to show or hide divs in Vue 3

vue.js

vuejs3

例子