V-if 语句仅适用于一行/链接答案

【问题标题】：V-if statement only for one line/linkV-if 语句仅适用于一行/链接
【发布时间】：2023-03-08 11:36:01
【问题描述】：

在 VUE.JS 中，当 if 语句不“正确”时，我尝试在图片下方隐藏链接（“myprofile”）。但是当我将 v-if 设置为 vue-router 或 div 标签时，整个图片/div-tag 被隐藏了。如何设置只涉及链接的 if 语句？

代码：

            <router-link v-if="condition == true" class="nav-link" to="/myprofile">
              <div
                class="img"
                :style="{
                  'background-image': "url"
                }"
              />
            </router-link>

【问题讨论】：

你不能。销毁父级将销毁其所有子级

标签： javascript vue.js if-statement vue-component vue-router

【解决方案1】：

只需添加另一个img div 并与v-else 一起使用

       <router-link v-if="condition == true" class="nav-link" to="/myprofile">
          <div
            class="img"
            :style="{
              'background-image': "url"
            }"
          />
        </router-link>
        <div
            v-else
            class="img"
            :style="{
              'background-image': "url"
            }"
          />

【讨论】：

【解决方案2】：

你可以像这样定义两个模板

<template v-if="condition == true">
 <router-link  class="nav-link" to="/myprofile">
          <div
            class="img"
            :style="{
              'background-image': "url"
            }"
              />
     </router-link>
</template>
<template v-else>
    <div
      class="img"
          :style="{
            'background-image': "url"
                }"
              />
</template>

【讨论】：

【解决方案3】：

尝试使用动态组件和v-bind:is (https://vuejs.org/v2/api/#is) 更改组件：

<component
  :is="condition ? 'router-link' : 'span'"
  class="nav-link"
  to="/myprofile"
>
  <div
    class="img"
    :style="{
      'background-image': "url"
    }"
  />
</component>

【讨论】：