在Vue js中使用v-show属性显示/隐藏元素

Question

我的myVueInstance带有两个单选按钮和一个文本框。基于单击单选按钮选项，我应该显示/隐藏文本框。

<div id='myVueInstance'>

    <label>Show Text box or not ? </label>
    <input type="radio" id="one" value="true" v-model="picked">
        <label for="one">Yes</label>

        <input type="radio" id="two" value="false" v-model="picked" >
        <label for="two">No</label>
        <br>
        <span>Picked: {{ picked }}</span>
        <input  type='text' v-show='picked'> 

    </div>


<script type="text/javascript">
    var app = new Vue({
        el:'#myVueInstance',
        data:{

            title : 'My learning of Vue',
            picked:true
        }
     });
</script>

注意：我正在使用Vue更新版本。

Answer 1

在这里，选择单选按钮时picked的类型将变为String。试试这个：

 <input  type='text' v-show="picked === 'true'">
...
...
...
 data:{

        title : 'My learning of Vue',
        picked: 'true'
    }