Vue-JS v-show电台中的Percentence

Question

v-show在白色收音机（v型）上显得不舒服 请找到示例：https://jsfiddle.net/Lngocxrj/1/

<div id="helloWorldApp">
              <input type="radio" v-model="visible" value="true" name="optradio">hide
              <input type="radio" v-model="visible" value="false" name="optradio">show
  <div v-show="visible">
    Hello World
  </div>
  <p>
   {{visible}}
  </p> 

</div>

new Vue({
  el: "#helloWorldApp",
  data: {
    visible: true
  },
  methods: {
    show: function() {
      this.visible = !this.visible;
    }
  }
});

Answer 1

如果您使用method来切换数据，它将起作用。

HTML：

<div id="helloWorldApp">
  <label>hide<input type="radio" value="false" @click="inputClick(false)" name="optradio" /></label>
  <label>show<input type="radio" value="true" @click="inputClick(true)" name="optradio" /></label>
  <div v-show="visible">
    Hello World
  </div>
  <p>
    {{visible}}
  </p>
</div>

JavaScript：

new Vue({
  el: "#helloWorldApp",
  data: {
    visible: false
  },
  methods: {
    inputClick(val) {
      this.visible = val;
    }
  }
});

Answer 2

添加了新属性来区分输入更改和显示/隐藏div

<div id="helloWorldApp">
              <input type="radio" v-model="visible" value="true" name="optradio">hide
              <input type="radio" v-model="visible" value="false" name="optradio">show
  <div v-if="showDiv">
    Hello Worlds
  </div>
  <p>
   {{visible}}
  </p> 

</div>


new Vue({
  el: "#helloWorldApp",
  data: {
    visible: false,
    showDiv: true
  }, 
  watch: {
  visible(val) {
    this.showDiv = val;
  }
  }
});

Answer 3

根据我的评论：不考虑v-show指令而显示元素的原因是因为复选框中的值存储为字符串而不是布尔值。而且由于"false"实际上是真实的，因为它是一个非零长度的字符串，因此您的div将始终可见。

快速解决方案：执行字符串比较

如果您希望将代码保持原样，并且了解自己正在查看的是字符串值而不是存储在visible中的布尔值，则可以更新模板以使用v-show="visible === 'true'"。

注意：不过，我不建议您使用此方法，因为这是一种代码味道（请参见下文，以获得更好的解决方案）。

new Vue({
  el: "#helloWorldApp",
  data: {
    visible: 'true'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="helloWorldApp">
              <input type="radio" v-model="visible" value="true" name="optradio">hide
              <input type="radio" v-model="visible" value="false" name="optradio">show
  <div v-show="visible === 'true'">
    Hello World
  </div>
  <p>
   {{visible}}
  </p> 

</div>

更好的解决方案：使用复选框进行二进制状态切换

这给我们带来了另一个问题：由于您要切换属性，因此单选按钮不是执行此操作的最佳UI。复选框更合适：在这种情况下，您不需要进行严格的严格比较：

new Vue({
  el: "#helloWorldApp",
  data: {
    visible: true
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="helloWorldApp">
  <input type="checkbox" v-model="visible" checked>visible
  <div v-show="visible">
    Hello World
  </div>
  <p>
    {{visible}}
  </p>

</div>