vue之循环遍历v-for
1.背景
2.遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
<h4>1.遍历数组</h4>
<h4>订单列表如下(不取下标)</h4>
<ul>
<li v-for="item in orderList">
{{item.orderName}}---- {{item.price}}---- {{item.num}}
</li>
</ul>
<h4>合计:{{allPrice}}</h4> <h4>订单列表如下(取下标)</h4>
<ul>
<li v-for="(item,index) in orderList">
{{index+1}}. {{item.orderName}}---- {{item.price}}---- {{item.num}}
</li>
</ul>
<h4>合计:{{allPrice}}</h4>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
title: '循环遍历v-for简单使用',
name: 'ldp',
orderList: [
{orderName: '方便面', price: 3, num: 6},
{orderName: '鸡腿', price: 8, num: 1},
{orderName: '手机', price: 39, num: 4},
{orderName: '鱼', price: 12, num: 9}
]
},
computed: {
allPrice: function () {
// 高阶函数 all表示每次的结果,item表示循环出来的每个对称 , reduce 函数的第二个参数表示 all=0开始累加
return this.orderList.reduce((all, item) => {
return all + item.price * item.num
}, 0)
}
}
});
</script>
</body>
</html>
3.遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
<h4>遍历对象</h4>
<ul>
<li v-for="(value,key,index) in product"> {{value}}--- {{key}}--- {{index}}---</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
title: '循环遍历v-for简单使用',
name: 'ldp',
product: {
orderName: '方便面',
price: 3,
num: 6
}
}
});
</script>
</body>
</html>
4.关于遍历中的key
5.数据数组变动中的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
<pre>
需求:
理解数组中的常用方法,并理解那些是响应式的方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
slice()
</pre>
<ul>
<li v-for="(item,index) in products"> {{index+1}}--- {{item}}</li>
</ul>
<button @click="push">push</button>
<button @click="pop">pop</button>
<button @click="unshift">unshift</button>
<button @click="shift">shift</button>
<button @click="splice">splice</button>
<button @click="sort">sort</button>
<button @click="reverse">reverse</button>
<button @click="slice">slice</button> </div>
<script>
let app = new Vue({
el: '#app',
data: {
title: '循环遍历v-for-数组方法的理解',
name: 'ldp',
products: ['A', 'B', 'C', 'D', 'E']
},
methods: {
// 在数组最后添加元素,响应式的方法
// push()方法在数组的尾部添加一个或者多个元素，并返回数组的新长度。注意的是，改变的是原数组的值，返回的是新数组的长度
push() {
let data = this.products.push("最后添加的push,响应式")
console.log("push=" + data)
},
// pop()方法删除数组的最后一个元素，并返回它的删除值。也是改变原数组，返回的是删除的值。
pop() {
let data = this.products.pop()
console.log("pop=" + data)
},
// unshift()方法类似于push()不同的是，他是在数组头部添加，其他都一样
unshift() {
let data = this.products.unshift("unshift()方法类似于push()不同的是，他是在数组头部添加，其他都一样")
console.log("unshift=" + data)
},
// shift()方法则类比pop()方法。
shift() {
let data = this.products.shift()
console.log("shift=" + data)
},
// Array.splice()方法，用来删除或插入元素，会修改原数组！
// //第一个参数是截取的起始位置（包括），第二个参数是截取(删除)的个数，之后的参数就是添加在元数组的新值
splice() {
// 从第二个开发删除0个,添加一个新元素
let data = this.products.splice(2, 0, '添加的新元素')
console.log("splice=" + data)
},
// Array.sort()方法，返回排序后的数组。如果数组包含undefined，会被排到数组的尾部。如果不带参数的调用sort()，数组元素以字母表顺序排序。
sort() {
let data = this.products.sort()
console.log("sort=" + data)
},
// 返回逆序数组（倒叙排列数组）[ Array..reverse() ]
reverse() {
let data = this.products.reverse()
console.log("reverse=" + data)
},
// Array.slice()方法，返回指定数组的片段或者子数组。不会改变原数组
// 第一个参数是截取开始的位置（包括），第二个参数是截取结束的位置（不包括）
slice() {
let data = this.products.slice(2, 4)
console.log("slice=" + data)
}
}
});
</script>
</body>
</html>
6.简易购物车练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<style>
table {
border: 2px solid cadetblue;
border-collapse: collapse;
border-spacing: 0;
} th, td {
border: 2px solid cadetblue;
}
</style>
<body>
<div id="app">
<h3>{{title}}</h3>
<pre>
需求:
做一个简易购物车
</pre>
<table>
<thead>
<tr>
<th>序号</th>
<th>品名</th>
<th>零售价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in products">
<td>{{index+1}}</td>
<td>{{item.orderName}}</td>
<td>{{item.price}}</td>
<td>
<button @click="decrement(index)">-</button>
{{item.num}}
<button @click="increment(index)">+</button>
</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
</tbody> </table>
总计:{{totalPrice}} </div>
<script>
let app = new Vue({
el: '#app',
data: {
title: '循环遍历-购物车案例',
name: 'ldp',
products: [
{orderName: '方便面', price: 3, num: 6},
{orderName: '鸡腿', price: 8, num: 1},
{orderName: '手机', price: 39, num: 4},
{orderName: '鱼', price: 12, num: 9}
]
},
computed: {
totalPrice() {
// 高阶函数
return this.products.reduce((total, item) => {
return total + item.num * item.price
}, 0)
}
},
methods: {
increment: function (index) {
console.log("---执行加一")
this.products[index].num++
},
decrement: function (index) {
console.log("---执行减一")
if (this.products[index].num > 1) {
this.products[index].num--
} else {
console.log("---在减就没有了")
}
},
del(index) {
this.products.splice(index, 1)
}
}
});
</script>
</body>
</html>
完美!
vue之循环遍历v-for的更多相关文章
- Vue之循环遍历Json数据，填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...
- vue组件，vue补充和总结，JS循环遍历和加减运算、类型转换补充
目录 一.vue中的组件 1. 组件的概念 2. 组件分类 3. 组件的特点 4. 组件的定义 5. 组件化 (1)用法和注意 (2)数据组件化实例 6. 组件传参--父传子 (1)用法和注意 (2) ...
- 关于js中循环遍历中顺序执行ajax的问题（vue）
js里的循环,每次都是自顾自的走,它不等ajax执行好走完到success代码,就继续循环下一条数据了,这样数据就全乱了. 后来,想到试试ajax里async这个属性,async默认是true,即为异 ...
- php中的循环遍历 foreach list each
foreach语句遍历数组foreach语句用于循环遍历数组,每进行一次循环,当前数组元素的值就会被赋值给变量value(也可以是其它变量),数组指针会逐一的移动. 代码示例: foreach($ar ...
- php用压栈的方式,循环遍历无限级别的数组(非递归方法)
php用压栈的方式,循环遍历无限级别的数组(非递归方法) 好久不写非递归遍历无限级分类...瞎猫碰到死老鼠,发刚才写的1段代码,压栈的方式遍历php无限分类的数组... php压栈的方式遍历无限级别数 ...
- yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并原数组信息---案例
yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并元数组信息---案例 public function actionRandomLists(){ //查询到了所 ...
- HashMap循环遍历方式及其性能对比(zhuan)
http://www.trinea.cn/android/hashmap-loop-performance/ ********************************************* ...
- HashMap循环遍历方式及其性能对比
主要介绍HashMap的四种循环遍历方式,各种方式的性能测试对比,根据HashMap的源码实现分析性能结果,总结结论. 1. Map的四种遍历方式 下面只是简单介绍各种遍历示例(以HashMap为 ...
- Vue中循环的反人类设计
今天学习Vue到循环那里,表示真是不能理解Vue的反人类设计 具体看代码吧! <!DOCTYPE html> <html> <head> <meta char ...
- JavaScript 中的常用12种循环遍历（数组或对象）的方法
1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 ...
随机推荐
- 安卓app 地铁最短路径查询 完成
我通过三个函数 完成了这个功能 首先 创建哈希表 根据起始站名 终点站名 然后 根据哈希表 建立起 邻接表' 最后 根据迪杰斯特拉算法 完成这个功能 /** * function:起终查询 */ / ...
- 【踩坑】.NET 8.0 自定义IExceptionHandler不生效
中间件实现异常处理 在ASP.NET Core里,我们可以使用中间件(Middleware)实现全局的异常处理. 如内置的异常处理中间件 UseExceptionHandler app.UseExce ...
- C++获取商店应用(msix应用)桌面快捷方式的安装目录
传统应用的快捷方式目标指向可执行文件的路径,但是对于商店应用(也叫msix打包应用),则指向一个奇怪的字符串,使用IShellLink::GetPath获取路径时,则得到的是空字符串,而我们的最终目的 ...
- Kafka Stream 以及其他流处理框架对比
1. Kafka Stream Introduction 假设我们需要对kafka 消息做流数据分析,例如: 对部分消息做过滤 每分钟计算一次收到了多少消息 这种情况下,对于消息过滤以及定时统计,甚至 ...
- Simple WPF: WPF 透明窗体和鼠标事件穿透
一个自定义WPF窗体的解决方案,借鉴了吕毅老师的WPF制作高性能的透明背景的异形窗口一文,并在此基础上增加了鼠标穿透的功能.可以使得透明窗体的鼠标事件穿透到下层,在下层窗体中响应. 这个方法不一定是制 ...
- 基于NXP i.MX 8M Mini开发板规格书（四核ARM Cortex-A53 + 单核ARM Cortex-M4，主频1.6GHz）
1 评估板简介 创龙科技TLIMX8-EVM-B是一款基于NXP i.MX 8M Mini的四核ARM Cortex-A53 + 单核ARM Cortex-M4异构多核处理器设计的高性能评估板,由核 ...
- OPC 详解 第一篇 基础概念
一 .概述 OPC 的全称是OPC(OLE for Process Control), 用于过程控制的OLE,OLE(Object Linking and Embedding)大家都知道是对象连接与嵌 ...
- 继续我们的复习之路——webapi
前面断更几天是因为在住安心复习DOM BOM的内容 不得不说 还得是DOM 在这一章节的复习内容中 涌现出了很多又代表意义 经典的一些小案例 而且 还是有些难度的 有一两个我反正是自己独立完成不了 ...
- Sql Server 创建用户并限制权限
创建登录名 使用sa或者Windows身份验证登录,[安全性]-[登录名],右键[新建登录名] 设置登录名属性 设置数据库权限 db owner --拥有数据库全部权限,包括删除数据库权限 db ac ...
- 解锁网络无限可能：揭秘微软工程师力作——付费代理IP池深度改造与实战部署指南
基于付费代理的代理IP池 项目来源 此项目为微软某个工程师构建的代理IP池,我对此进行了改造.可以用于生产环境中的爬虫项目 阅读前建议 阅读我之前发布的爬虫基础的文章,了解代理如何获取.使用等. 分为 ...