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">订单号 <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日 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才能用)
原文地址:https://www.cnblogs.com/yegeng/p/10273398.html
时间: 2024-11-07 05:07:49