vue v-for和v-if 共存問題解決

做過後端開發  在模板引擎中經常會有foreach  循環 會遇到if 判斷語句，因爲foreach 包裹在循環體外面，所以很好就可以使用if判斷，而在vue 中發現  v-for是在循環體上  在然後在用到v-if中總是報錯  因爲v-for 具有比 v-if 更高的優先級

所以 把v-for 放到循環體的父級

 <ul v-for="(item,i) in list.type_news_list" :key="i" v-show="btn_t || i<3">
              <li class="list-1 flex"  v-if="i===0">
                <div class="hot-img" >
                  <img :src="item.news_img" alt />
                  <span class="iconfont icon-bofang"></span>
                </div>
                <div class="hot-title">
                  <span class="hot-l">{{item.news_title}}</span>
                  <div class="flex hot-r">
                    <div>
                      <span class="iconfont icon-shipin"></span>
                      <span>{{item.news_num}}</span>
                    </div>
                    <div>
                      <span class="iconfont icon-shijian"></span>
                      <span>{{item.news_date}}</span>
                    </div>
                  </div>
                </div>
              </li>
              <li class="list-2 flex" v-else>
                <div class="list-2-r ellipsis">{{item.news_title}}</div>
                <div class="list-2-l">
                  <span class="iconfont icon-shipin"></span>
                  <span>{{item.news_num}}</span>
                </div>
              </li>
            
            </ul>