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

  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才能用)

原文地址:https://www.cnblogs.com/yegeng/p/10273398.html

时间: 2024-11-07 05:07:49

vue中v-for的用法以及参数的作用的相关文章

详解Vue中watch的高级用法

我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName. handler方法和immediate属性 这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算.那我们想要一开始就让他最初绑定的时候就执行改怎么办呢?我们需要修改一下我们的 watch 写法,修改过后的 wa

VUE中关于$emit的用法

一.事件 关于什么是JavaScript事件可以参考:https://www.w3schools.com/js/js_events.asp 二.$emit vue中对$emit的定义见: vm.$emit( eventName, [-args] ) 参数: {string} eventName [...args] 触发当前实例上的事件.附加参数都会传给监听器回调. 三.用途与示例 1.父组件可以使用 props 把数据传给子组件. 1.子组件可以使用 $emit 触发父组件的自定义事件. 子组件

vue中watch的详细用法

在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) 直接写一个监听处理函数,当每次监听到 cityNam

Vue中echarts的基本用法

前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的echarts.下面按步骤讲解. 第一步:安装echarts依赖包,然后引入,注意最好在当前使用的组件中引入,而不需要在main.js中注册. //1.首先引入 import echarts from "echarts"; 第二步:在页面中创建一个盒子,用来装载图表 <!-- 2.为e

vue 中的key 的用法

(Emitted value instead of an instance of Error) <router-link v-for="item in mycrowdJoinArr">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. 我们有的时候会在npm run dev的时候  发

jquery中的ajax请求用法以及参数详情

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

Vue中watch的高级用法

<template> <div> <input type="text" v-model="value"> </div> </template> <script> export default { data() { return { value:null } }, created(){ this.test() }, methods: { test(){ console.log("第一个加

Vue中is属性的用法 可以动态切换组件

is 是组件的一个属性,用来展示组件的名称 is和component联用哈 <component :is="comName"> vue提供了component来展示对应的组件名称 compont是一个占位符,is这个属性,用来展示对应的组件名称 三个子组件 <template> <div> <h2>我是登录组件</h2> </div> </template> <template> <d

vue中钩子函数的用法

这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈. beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted: 在这发起后端请求,拿回数据,配合路由钩子做一些事情 beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容 当然,还有更多,继续探索中-- 原文地址:https://www.cnblogs.com/zr123/p