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 指向的是函数定义时所在的 ...
随机推荐
- <位运算> 任意二进制数 异或两个相同的二进制数 还是原本的值
二进制,即0与1. 因为两个相同的二进制 异或必为0.(类似于不进位加法) 二进制里与0异或为其原本的0与1.. 可得任意二进制数 异或两个相同的二进制数 还是原本的值. 可用于交换和加密.
- MYSQL数据库索引、事务。
=============================================================================================== inno ...
- mysql取出字段数据的精度
$field = 'convert(avg(mood),decimal(4,0)) mood,convert(avg(hrv),decimal(4,0)) hrv,convert(avg(heart_ ...
- springboot~Transactional注解的注意事项
@Transactional注解是为方法添加事务块的意思,使用aop的技术动态为方法添加事务范围,在使用它时可以在类或者方法上添加,但在类上添加时需要注意一下影响的范围. 类中添加Transactio ...
- jvm 内存，线程，gc分析
1.查看 gc的次数,和各个垃圾回收区域的内存比例 jstat : jstat -gcutil pid interval(ms) 例子:jstat -gcutil 332 1000 参数说明如下: ...
- Ubuntu配置Python开发环境（PyCharm、Tensorflow）
安装JDK: https://www.cnblogs.com/wanghuixi/p/9837229.html 安装Anaconda: 安装PyCharm: https://www.cnblogs.c ...
- 【K-means算法】matlab代码实例学习
1. MATLAB函数Kmeans 使用方法:Idx=Kmeans(X,K)[Idx,C]=Kmeans(X,K) [Idx,C,sumD]=Kmeans(X,K) [Idx,C,sumD,D]=Km ...
- 固定ip配置
1.打开 网络和internet设置 2. 3. 4.查看详细信息 5.记住这几个 6.选择属性开始配置 7. 8.只要把ip地址设置为同一网段下面的你想要的设置的空余ip即可,其他掩码和DNS不要修 ...
- iOS开发架构学习记录
闲着没事看了一些iOS开发架构的视频,简单的介绍了几个常用的架构设计,现将它记录如下,以后有时间再专门写这方面的内容,大家可以看看,感兴趣的就进一步学习. 一.架构基础 1.架构设计的目的 进一步解耦 ...
- vim功能之替换和查找
vim有着强大的替换和查找功能,若能进行熟练的运用,可以让工作效率得到一个很大程度的提高. 替换 语法:[addr]s/源字符串/目的字符串/[option] [addr]表示检索范围,如: &quo ...