如何解决如何使用v-if和v-show隐藏文字
当我按“ ABCD”并且ABCD应该消失时,我试图显示文本A和B。当按下“ EFGH”时,E&F应该显示,EFGH应该消失(代码中未显示)。 我正在试验代码,很明显我做错了,有人可以帮助我指出这一点吗?
var one = new Vue({
el:'#app-one',data:{
show:false,},methods:{
showing:function(){
show=!show;
}
}
});
var two = new Vue({
el:'#app-two',data:{
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<div id = 'app-one' v-if:'showing==true'>
<div @click='show'>ABCD</div>
<div>EFGH</div>
</div>
<div id='app-two' v-if:'showing==false'>
<div>A</div>
<div>B</div>
</html>
解决方法
v-if:"showing==true"
正在评估方法showing
的真实性。它必须为v-if="show"
。
您缺少结束div
标签。
showing
也可以删除并简化为@click='show = !show'
:
var one = new Vue({
el: '#app-one',data: {
show: true,},});
var two = new Vue({
el: '#app-two',data: {
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app-one' v-if='show'>
<div @click='show = !show'>ABCD</div>
<div>EFGH</div>
</div>
<div id='app-two' v-if='!show'>
<div>A</div>
<div>B</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。