v-for使用index索引当作数据总条数显示出来

Question

问题描述

我想用v-for的index索引 最后一条当作整个页面查询的数据条数

问题出现的环境背景及自己尝试过哪些方法

index总是没取到 而且也不知道怎么取动态的最后一个

就像这种效果的怎么实现

相关代码

             methods: {
                Get_YJweather: function() {
                var _this = this;
                var a = document.getElementById('beginTime').value;
                var b = document.getElementById('overTime').value;
                mui.ajax('http://aaaaaa,method=Get_YJweather', {
                    data: {
                        timefrom: a,
                        timeto: b
                    },
                    dataType: 'json', //服务器返回json格式数据
                    type: 'post', //HTTP请求类型
                    timeout: 50000, //超时时间设置为10秒；
                    success: function(res) {
                        _this.weatherwaring = JSON.parse(res);
                        console.log('请求成功' + res);
                    },
                    error: function(xhr, type, errorThrown) {
                        console.log('请求失败');
                    }
                });
              },
            } 
            
            
            
            <div  class="mui-control-content mui-active">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3">
                    <div class="mui-input-row">
                        <input id="beginTime" ref="time-from" type="text" class="mui-input-clear" placeholder="请选择开始时间" data-options='{"type":"date"}'>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3">
                    <div class="mui-input-row">
                        <input id="overTime" ref="time-toto" type="text" class="mui-input-clear" placeholder="请选择结束时间" data-options='{"type":"date"}'>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3">
                    <div class="mui-input-row">
                        <button @click="Get_YJweather()" type="button" class="mui-btn mui-btn-blue mui-btn-block" style="border: 1px solid #5f9ae1;background-color: #5f9ae1;">查询结果</button>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3" v-for="(w,index) in weatherwaring">
                    <div class="mui-input-row">
                    {{getIndex()}}
                    </div>
                </li>
            </ul>
            <ul class="mui-table-view mui-table-view-chevron" style="background: rgba(255, 255, 255, 0.6);" v-for="(w,index) in weatherwaring">
                <li class="mui-table-view-cell mui-collapse">
                    <a class="mui-navigate-right">
                        <img class="mui-media-object mui-pull-left" src="../img/icon/fb.png">
                        <div class="mui-media-body mui-ellipsis">
                            {{w.ALARMNAME}}
                            <p class="mui-ellipsis">{{w.PUBLISHTIME}}</p>
                        </div>
                    </a>
                    <ul class="mui-table-view mui-table-view-chevron">
                        <li class="mui-table-view-cell">
                            <span>详情信息：
                                <p style="color: #007aff;">{{w.CONTENT}}</p>
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>                                                                                      

你期待的结果是什么？实际看到的错误信息又是什么？

大神能不能给一个实例或者方法小白不太明白才用VUE

Answer 1

...你这总条数，不就是要循环数据的length吗