VUE中有两个子template，条件判断只显示其中一个

源码资源网

VUE中有两个子template，条件判断只显示其中一个
在Vue.js中，您可以使用 `v-if` 指令来根据条件显示或隐藏不同的子模板。以下是一个示例，演示如何根据条件只显示两个子模板中的一个：

1. html
   
2. <template>
   
3.   <div>
   
4.     <template v-if="showTemplateA">
   
5.       <div>Template A</div>
   
6.     </template>
   
7.     <template v-else>
   
8.       <div>Template B</div>
   
9.     </template>
   
10.   </div>
    
11. </template>
    
12. <script>
    
13. export default {
    
14.   data() {
    
15.     return {
    
16.       showTemplateA: true // 默认显示模板A
    
17.     };
    
18.   },
    
19.   methods: {
    
20.     toggleTemplate() {
    
21.       this.showTemplateA = !this.showTemplateA; // 切换显示模板A和模板B
    
22.     }
    
23.   }
    
24. }
    
25. </script>

复制代码

在上面的示例中，根据 `showTemplateA` 的值，决定显示模板A还是模板B。您可以根据需要调整条件和切换逻辑来控制显示哪个子模板。
通过调用 `toggleTemplate` 方法，您可以切换显示的子模板。例如，您可以在按钮点击时调用 `toggleTemplate` 方法来切换显示的子模板。