如何解决Vue.js-在从App.vue传递的页面上隐藏文本
我真的是Vue的新手。我有多个页面,例如App.vue
,Waiting.vue
,Reference.vue
,Switch.vue等。 **App.vue**
上定义的文本将正确传递到其他页面。但是现在我不想显示从WELCOME
传递到App.vue
页面的Waiting.vue
文本。有什么方法可以只在WELCOME
页面上隐藏Waiting.Vue
?
App.vue
<div id="app">
<b-container>
<b-col lg="5">
WELCOME
</b-col>
</b-container>
</div>
Waiting.vue
<div id="app">
<p class="teamTitle">TEAMS ON DECK</p>
</div>
等待的力量
WELCOME
TEAMS ON DECK
解决方法
假设Waiting
页面路径为/waiting
,那么您应该这样做:
<div id="app">
<b-container>
<b-col lg="5" v-if="$route.path!=='/waiting'">
WELCOME
</b-col>
</b-container>
</div>
,
我假设App.vue充当父组件,并且具有在页面中可见的内容。在这种情况下,有多种隐藏信息的方法。
-
如果使用路由器并且
Waiting.vue
在不同的路由上,则可以检查路由参数以有选择地隐藏文本。例如在App.vue
中。<b-col lg="5" v-if="!this.$route.fullPath === '/waiting'"> WELCOME </b-col>
-
如果您使用Vuex之类的全局存储,只需在加载
Waiting.vue
时在Vuex中设置一个变量,然后将该变量设置为其他组件中的其他变量 -
如果出于任何原因将所有内容都放在一个页面上,请将变量作为prop传递并有选择地隐藏该元素(类似于[1])
App.vue
<Waiting :hide="true"/>
Waiting.vue
<b-col lg="5" v-if="!hide"> WELCOME </b-col> <!-- other code --> <script> export default { props: { default: false,type: Boolean,required: false } } </script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。