VUe for循环if 的使用和函数的使用 （笔记）
结果如图：
代码html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head> <body>
<div id="app" >
<div v-if="books.length>0">
<table>
<thead>
<tr>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>数量</th>
<th>购买数</th>
<th>操作</th>
<th>移除</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<th >{{item.id}}</th>
<th >{{item.name}}</th>
<th >{{item.data}}</th>
<th >{{item.price|showY}}</th>
<!-- 价格这里添加了过滤器-->
<th ><button @click="insc(index)">+</button>
{{item.count}}
<button @click="dec(index)" v-bind:disabled="item.count<=1">-</button>
</th>
<th><button @click="removeit(index)">移除</button></th>
</tr> </tbody> </table>
<h3>总价格 :{{totalPrice}}</h3>
</div>
<div v-else>
购物车为空
</div>
</div>
</body>
<!--再之前和之后引入有区别-->
<script src="../JS/vue.js"></script>
<script src="../JS/main.js"></script>
</html>
main.js
const app=new Vue({
el:"#app", //挂载那个元素//注意这里有井号 初学者容易掉
data:{
books:[{ id :,
name:"算法",
data:"2006-9",
price: ,
count:},
{ id :,
name:"unix编程",
data:"2006-9",
price: ,
count:},
{ id :,
name:"java入土",
data:"2006-9",
price: ,
count:},
]
},
methods:{
insc(index){
this.books[index].count++;//注意这里的写法
},
dec(index)
{
this.books[index].count--;//注意这里的写法
},
removeit(index)
{
this.books.splice(index,)//删除自身
}
},
filters:{//注意是filtes 夹着s
showY(price)
{
return "Y" +price
}
},computed:
{ totalPrice()
//直接调用不用加括号
{
let totleprice=;
for (let i=;i<this.books.length;i++)
{totleprice+=this.books[i].price*this.books[i].count;
}
return totleprice
}
},
})
VUe for循环if 的使用和函数的使用 （笔记）的更多相关文章
- Vue中循环的反人类设计
今天学习Vue到循环那里,表示真是不能理解Vue的反人类设计 具体看代码吧! <!DOCTYPE html> <html> <head> <meta char ...
- vue v-for循环的用法
1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对 ...
- 在vue项目中 如何定义全局变量 全局函数
如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...
- Vue.js——循环（Java、JSTL标签库、数据库）
一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...
- vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- vue 2.5.14以上版本render函数不支持返回字符串
vue 2.5.14以上版本render函数不再支持直接返回字符串,必须返回数组或vnode节点,如果返回字符串的话,渲染为空.详情可见源码. function createFunctionalCom ...
- Python学习：for 循环 与 range（）函数
for 循环 For … in 语句是另一种循环语句,其特点是会在一系列对象上进行迭代(Iterates),即它会遍历序列中的每一个项目 注意: 1.else 部分是可选的.当循环中包含它时,它 ...
- 聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数？
聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数 本文重点知识点速览: Vue 中的 watch 对象中的回调函数不能是箭头函数. 箭头函数中的 this 指向的是函数定义时所在的 ...
随机推荐
- Java数字和字符的对照关系表
/* 数字和字符的对照关系表(编码表): ASCII码表:American Standard Code for Information Interchange,美国信息交换标准代码. Unicode码 ...
- JSON.parse()处理json字符串时需要处理的特殊字符
var str= "json字符串"; str=str.replace(/\\/g,"\\\\"); str=str.replace(/\n/g,"\ ...
- Python：时间日历基本处理
time 模块 提供了处理时间和表示之间转换的功能 获取当前时间戳 时间戳:从0时区的1970年1月1日0时0分0秒,到所给定日期时间的时间,浮点秒数,或者毫秒整数 获取方式: import time ...
- 【渗透测试】MS17-010 "永恒之蓝" 修复方案
多所院校电脑被勒索,吾等当代大学生怎能坐视不管. --------------------------------------------------------------------------- ...
- Spring Boot 2.x 入门前的准备-安装 Java JDK
本章节介绍在以 window7.window10 为代表的 window 和 mac book 下安装 Java 编译和开发环境JDK 1.8,在 window 上安装 Java JDK 的步骤,本章 ...
- 为什么ISR4K、ASR1K等设备的QoS ACL没有显示计数？
思科的ISR4K和ASR1K设备都是IOS XE的架构,它们和传统的IOS架构是不一样的. 以ISR4K为例,和一般的IOS(例如ISR G2)有所区别,他的转发更依赖硬件完成,针对NAT或QoS应用 ...
- Django-ORM的F查询和Q查询
当一般的查询语句已经无法满足我们的需求时,Django为我们提供了F和Q复杂查询语句.假设场景一:老板说对数据库中所有的商品,在原价格的基础上涨价10元,你该怎么做?场景二:我要查询一个名字叫xxx, ...
- 微信小程序 列表倒计时
最近要实现一个列表倒计时的功能,写了个demo 展示图 <view class="center colu"> <view class="time&quo ...
- 小程序云开发使用where查询遇到的问题
想用小程序云开发的where查询,结果不论输入什么都是不报错,开始没注意,后来发现输入数据库中有的数据时,给打印出来查询成功,输入数据库中没有的数据时,也会得到一个集合,只不过这个集合的长度为0而已. ...
- Nginx解决服务器宕机问题
1.Nginx解决服务器宕机问题,Nginx配置服务器宕机策略,如果服务器宕机,会找下一台机器进行访问 配置nginx.cfg配置文件,在映射拦截地址中加入代理地址响应方案 location / { ...