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 ...
随机推荐
- leetcode | 103. 二叉树的锯齿形层序遍历 | JavaScript实现
题目 给你二叉树的根节点 root ,返回其节点值的 锯齿形层序遍历 .(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 思路 按照正常的层序遍历,然后再对下标为奇数的数组进 ...
- java多线程编程：你真的了解线程中断吗？
java.lang.Thread类有一个 interrupt 方法,该方法直接对线程调用.当被interrupt的线程正在sleep或wait时,会抛出 InterruptedException 异常 ...
- MyBatis 关于查询语句上配置的详细内容
1. MyBatis 关于查询语句上配置的详细内容 @ 目录 1. MyBatis 关于查询语句上配置的详细内容 2. 准备工作 3. SQL查询结果,返回为POJO实体类型 4. SQL查询结果,返 ...
- StringUtils.join()方法使用
* StringUtils.join()方法使用 打印输出: * 使用 StringBuilder 进行拼接:张三,李四,王五 * 使用 StringUtils.join 进行拼接:张三,李四,王五 ...
- ARM Cortex-A系列处理器性能分类比较
在如今这个电子产品泛滥的年代,仅仅靠品牌或是外观已经不足以辨别产品的优劣,其内置的处理器自然也就成为了分辨产品是否高端的标准之一.那么我们今天就不妨好好了解一下近几年来电子产品中较为主流的RAM处理器 ...
- Vs生成后 自动压缩 删除多余xml
setlocal enabledelayedexpansionset ProjectName=$(ProjectName)del /s /q /f "$(ProjectDir)bin\Deb ...
- 【论文阅读】自动驾驶光流任务 DeFlow: Decoder of Scene Flow Network in Autonomous Driving
再一次轮到讲自己的paper!耶,宣传一下自己的工作,顺便完成中文博客的解读 方便大家讨论. Title Picture Reference and pictures paper: https://a ...
- Coding:小写一个debugfs
Coding:小写一个debugfs 上一次整活还是在上一个月,写了一个简单的module并且熟悉了module的挂载查看和卸载.这一次我们自然玩一个大的,就是利用linux的debugfs AP ...
- 韦东山freeRTOS系列教程之【第十章】软件定时器(software timer)
目录 系列教程总目录 概述 10.1 软件定时器的特性 10.2 软件定时器的上下文 10.2.1 守护任务 10.2.2 守护任务的调度 10.2.3 回调函数 10.3 软件定时器的函数 10.3 ...
- yb课堂 谷歌开源缓存框架Guava cache，封装API 《二十》
Guava cache github地址:点我直达 全内存的本地缓存实现 高性能且功能丰富 线程安全,操作简单 添加依赖 <dependency> <groupId>com.g ...