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 指向的是函数定义时所在的 ...
随机推荐
- 【C语言】输入一个年份和月份，输出该月的天数
分析: 三种类型, A.2月比较特殊,平年的2月只有28天,而闰年的2月有 29 天: B.4.6.9.11月: C.其他1.3.5.7.8.10.12月. 代码: /*输入一个年份和月份,输出该月的 ...
- 【CSS属性#1】
" 目录 一.宽和高 二.字体属性 1. 文字字体 font-famlly 2. 字体大小 font-size 3. 字重(粗细) font-weight 4. 文本颜色 color 三.字 ...
- Linux下RabbitMQ的安装及使用
过多的描述就不扯了,本文主要记录RabbitMQ的安装以及简单使用.本次安装是为了实现spring cloud的消息总线:SpringCloud全家桶学习之消息总线---SpringCloud Bus ...
- 【STM32H7教程】第57章 STM32H7硬件JPEG编解码基础知识和HAL库API
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第57章 STM32H7硬件JPEG编解码基础知识 ...
- 修正SQLSERVER package连接
drop table #temp_mt; --WITH XMLNAMESPACES ('www.microsoft.com/SqlServer/Dts' AS DTS) SELECT ROW_NUMB ...
- 《JavaScript高级程序设计》读书笔记（三）基本概念第三小节 String、Object类型
内容---语法 上一小节---数据类型 本小节 String类型---流程控制语句---理解函数 String类型--零个或者多个16位Unicode字符组成字符序列,即字符串--可以由双引号&quo ...
- Plastic Bottle Manufacturer - Different Cosmetic Plastic Bottle Materials, Different Characteristics
Plastic bottles are usually made of PP, PE, K, AS, abs, acrylic, PET, and the like. Dust caps for th ...
- DVWA实验之Brute Force（暴力破解）- High
DVWA实验之Brute Force(暴力破解)- High 有关DVWA环境搭建的教程请参考: https://www.cnblogs.com/0yst3r-2046/p/10928380.ht ...
- 寒假pta一
打印沙漏 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐 ...
- ISE主备注册和同步
Synchronize Primary and Secondary Cisco ISE Nodes You can make configuration changes to Cisco ISE on ...