vue中v-for的用法以及参数的作用

Posted 2021-02-03 yegeng

  1 <template>
  2   <div>
  3     <div class="content clearfix" v-on:click="goorderingDetail(v)" v-for="(v,index) in anylist" :key="index">
  4       <div class="clearfix">
  5         <div class="fl dingnumber">订单号&nbsp;&nbsp;<span>{{v.orderNum}}</span></div>
  6         <div class="fr state">{{v.state}}</div>
  7       </div>
  8       <div class="clearfix receive">
  9         <div class="fl">收</div>
 10         <div class="fr add reAdd">{{v.receiveAdd}}</div>
 11       </div>
 12       <div class="clearfix send">
 13         <div class="fl">发</div>
 14         <div class="fr add sAdd">{{v.sendAdd}}</div>
 15       </div>
 16       <div class="date fl">2018年9月28日&nbsp;&nbsp;&nbsp;&nbsp;12:00</div>
 17       <div class="fr sure" v-on:click.stop="gosureReceive(v)">确认取件</div>
 18     </div>
 19   </div>
 20 </template>
 21 
 22 <script>
 23 import $ from ‘jquery‘
 24 export default {
 25   name: ‘ordering‘,
 26   data () {
 27     return {
 28       anylist: []
 29     }
 30   },
 31   mounted () {
 32     this.ready()
 33   },
 34   methods: {
 35     ready: function () {
 36       $.ajax({
 37         type: ‘GET‘,
 38         url: ‘./../../../static/ing.json‘,
 39         data: {},
 40         dataType: ‘json‘
 41       }).then(res => {
 42         // console.log(res)
 43         // console.log(res.data)
 44         this.anylist = res.data
 45       })
 46         .catch(error => {
 47           console.log(error)
 48         })
 49     },
 50     goorderingDetail: function (v) {
 51       // console.log(v.receiveAdd)
 52       // console.log(v.sendAdd)
 53       /* 获取当前点击内容的收件发件地址 */
 54       var IreAdd = v.receiveAdd
 55       var IseAdd = v.sendAdd
 56       var IOrderNum = v.orderNum
 57       sessionStorage.setItem(‘IReAdd‘, JSON.stringify(IreAdd))
 58       sessionStorage.setItem(‘ISeAdd‘, JSON.stringify(IseAdd))
 59       sessionStorage.setItem(‘IOrderNum‘, JSON.stringify(IOrderNum))
 60       this.$router.push({path: ‘/orderingDetail‘})
 61     },
 62     gosureReceive: function (v) {
 63       // console.log(v.receiveAdd)
 64       // console.log(v.sendAdd)
 65       /* 获取当前点击内容的收件发件地址 */
 66       var IreAdd = v.receiveAdd
 67       var IseAdd = v.sendAdd
 68       sessionStorage.setItem(‘IReAdd‘, JSON.stringify(IreAdd))
 69       sessionStorage.setItem(‘ISeAdd‘, JSON.stringify(IseAdd))
 70       this.$router.push({path: ‘/sureReceive‘})
 71     }
 72   }
 73 }
 74 </script>
 75 
 76 <style scoped>
 77   .content{
 78     width: 96%;
 79     margin: auto;
 80     padding: 0.3rem;
 81     background: #ffffff;
 82     box-shadow: 5px 5px 5px #eae8e8;
 83     margin-top: 0.5rem;
 84   }
 85   .dingnumber{
 86     font-size: 0.8rem;
 87     line-height: 1.7rem;
 88   }
 89   .state{
 90     font-size: 1rem;
 91     letter-spacing: 1px;
 92     color: #ff7c1d;
 93     margin-right: 0.5rem;
 94     font-weight: bold;
 95   }
 96   .receive,.send{
 97     font-size: 0.9rem;
 98     font-weight: bold;
 99     color: #ff7c1d;
100     margin-top: 1rem;
101   }
102   .add{
103     width: 85%;
104     vertical-align: bottom;
105     word-break:keep-all;/* 不换行 */
106     white-space:nowrap;/* 不换行 */
107     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
108     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
109   }
110   .date{
111     text-align: left;
112     font-size: 0.8rem;
113     padding: 0.2rem;
114     margin-top: 2rem;
115   }
116   .sure{
117     padding: 0.5rem 1rem 0.5rem 1rem;
118     border: 1.5px solid #ff7c1d;
119     letter-spacing: 1px;
120     border-radius: 0.3rem;
121     margin-top: 0.9rem;
122     margin-right: 0.3rem;
123     font-weight: bold;
124     color: #ff7c1d;
125     font-size: 0.9rem;
126     z-index: 1000;
127   }
128 </style>

上面代码中，第3行和第17行：

第3行和第17行函数都包含在v-for循环中，参数中传入的参数v都可以获取到数据集合

第50和第62行在函数中传入v即可获取到对应的值（但是需要在定义函数和使用函数时都传入参数v才能用）