vue.js中,在v-for循环里,使用v-if和v-else,没有实现条件逻辑是怎么回事?

问题描述

问 题

最近开始使用vue.js,遇到了一个问题,代码如下:

        <ul class="weui_cells">
            <li class="am-left-15 pd-tb-6 display-webkit border-bottom" v-for="stock in stocks" v-if="stock.stockCategory=='1'">
                <div class="am-right-10">
                    <img v-bind:src="stock.imgSrc" alt="">
                </div>
                <div class="news-title am-flexbox-item">
                    <div class="am-right-15">
                        <p class="am-ft-md am-ft-black nowrap">{{stock.name}}</p>
                        <div class="am-ft-smm am-ft-darkgray">{{stock.desc}}</div>
                    </div>
                    <div class="am-flexbox border-top am-call-list am-right-15">
                        <div class="am-flexbox-item am-ft-sm am-ft-blue"><a href="{{stock.link}}">立即开户</a></div>
                        <a class="am-call" href="tel:{{stock.phone}}"></a>
                    </div>
                </div>
            </li>
            <li class="am-left-15 pd-tb-6 display-webkit border-bottom" v-else>
                <p style="color: #999">暂无数据</p>
            </li>
        </ul>

实现效果如图:

在v-if中的li有数据的情况下,为何标注了v-else的li还是能显示出来?我想实现如图所示在v-if标注的li能渲染时,v-else不显示(图中'暂无数据不显示'),反之当v-if标注的li没有可渲染的数据时,v-else标注的li显示.目前stock.stockCategory=='1'的情况是这种判断方法,还有stock.stockCategory=='2',stock.stockCategory=='3'也打算采用相同的方式.

解决方案

想了半天终于解决了,虽然赶脚不是最优解,代码如下:

    var stockVue = new Vue({
        el: '#stocksList',
        data:{
            stocks:[],
            aStocks:[],
            hkStocks:[],
            usaStocks:[]
        },
        methods:{
            noAStock:function() {
                if(!this.aStocks[0]){
                    return true;
                }else{
                    return false;
                }
            },
            noHkStock:function() {
                if (!this.hkStocks[0]) {
                    return true;
                } else {
                    return false;
                }
            },
            noUsaStock:function() {
                if (!this.usaStocks[0]) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    })
    $.get($config.sUrl+'...',function(data){
        stockVue.stocks = data.value;
        stockVue.stocks.filter(function(stock){
            switch (stock.stockCategory){
                case "1":
                    stockVue.aStocks.push(stock);
                    console.log(stockVue.aStocks)
                    break;
                case "2":
                    stockVue.hkStocks.push(stock);
                    console.log(stockVue.hkStocks)
                    break;
                case "3":
                    stockVue.usaStocks.push(stock);
                    break;
                default:
                    console.log('未指定股票类型');
            }
        })

    })

        <ul class="weui_cells">
            <li class="am-left-15 pd-tb-6 display-webkit border-bottom" v-for="stock in stocks" v-if="stock.stockCategory=='1'">
                <div class="am-right-10">
                    <img v-bind:src="stock.imgSrc" alt="">
                </div>
                <div class="news-title am-flexbox-item">
                    <div class="am-right-15">
                        <p class="am-ft-md am-ft-black nowrap">{{stock.name}}</p>
                        <div class="am-ft-smm am-ft-darkgray">{{stock.desc}}</div>
                    </div>
                    <div class="am-flexbox border-top am-call-list am-right-15">
                        <div class="am-flexbox-item am-ft-sm am-ft-blue"><a href="{{stock.link}}">立即开户</a></div>
                        <a class="am-call" href="tel:{{stock.phone}}"></a>
                    </div>
                </div>
            </li>
            <li class="am-left-15 pd-tb-6 display-webkit border-bottom" v-if="noAStock()">
                <p style="color: #999">暂无数据</p>
            </li>
        </ul>

这篇关于vue.js中,在v-for循环里,使用v-if和v-else,没有实现条件逻辑是怎么回事?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！