Vue中v-if和v-else未按预期生效，搜索时无法正确切换对应显示区块

问题排查与修复 #

1 核心错误：v-if判断条件写法错误 #

你在输入框用了v-model="search"双向绑定变量，判断该变量是否为空时不需要加.value后缀：

• 若使用Vue3 <script setup> 声明const search = ref('')，template会自动解包ref值，无需额外加.value
• 若使用Vue2/选项式API在data中声明search，该变量本身就是基础字符串类型，不存在.value属性
  这是导致你的条件判断始终不生效、区块无法按预期切换的主要原因。

2 v-if/v-else规则确认 #

你当前代码中v-if绑定的.movies-list和v-else绑定的.container是直接相邻的兄弟元素，符合v-if/v-else的使用要求，这部分逻辑没有问题。

修正后的代码片段 #

<template>
  <section id="whiteClawVideo" class="videoWrapper d-block w-100">
    <div class="video-container fluid">
      <iframe width="100%" height="600" src="https://www.youtube.com/embed/JORN2hkXLyM?autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </section>

  <form @submit.prevent="SearchMovies()" class="search-box">
    <input type="text" placeholder="What are you looking for? " v-model="search" />
    <input type="submit" value="Search">
  </form>

  <!-- 修正判断条件，去掉.value -->
  <div class="movies-list" v-if="search !== ''" >
    <div class="movie" v-for="movie in movies" :key="movie.imdbID">
      <router-link :to="'/movie/'+movie.imdbID" class="movie-link">
          <img :src="movie.Poster" alt="Movie Poster" />
            <div class="type">{{ movie.Type }}</div>
             <div class="detail">
               <p class="year">{{movie.Year}}</p>
               <h3>{{ movie.Title }}</h3>
               <p>{{movie.imdbID}}</p>
             </div>
      </router-link>
    </div>
  </div>

  <div  class="container" v-else>
    <MovieSection />
    <SecondMovieSection />
  </div>
</template>

可选优化（按需使用） #

如果你希望只有点击搜索按钮后才切换区块，而不是输入内容时就实时切换，可以新增一个状态变量控制：

• 声明变量const isSearched = ref(false)（Vue3）或在data中加isSearched: false
• 在SearchMovies方法执行时设置isSearched = true，清空搜索时设置为false
• 将判断条件改为v-if="isSearched && search !== ''"即可。

内容的提问来源于stack exchange，提问作者Msingh17