template标签结合v-if,v-else不影响相关样式

问题描述

有时候存在这种情况,h2和span标签与第二个h2标签不想同时显示,也就是111,222显示,333就不显示,333显示,111,222就不显示。这时候就会用到v-if,v-else,然后给h2，span外面包裹一个div，但是这样做样式可能就会乱掉,可以考虑用template节点去包裹,template标签不会生成额外节点,并且样式也不会乱掉

      <div class="demo">
            <h2>111</h2>
            <span>222</span>
            <h2>333</h2>
        </div>

解决方案

        <div class="demo">
          <template v-if="你的变量">
            <h2>111</h2>
            <span>222</span>
          </template>
          <template v-else>
            <h2>333</h2>
          </template>
        </div>