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 指向的是函数定义时所在的 ...
随机推荐
- Move-to-front(MTF) and Run-lenght encoding(RLE) algorithms
mtf算法(关于该算法:https://www2.cs.duke.edu/csed/algoprobs/beta/bw1.html): #include <stdio.h> #includ ...
- python linux windows 历史版本下载
Index of /ftp/python/ ../ 2.0/ 14-Feb-2019 14:53 - 2.0.1/ 06-Aug-2001 02:14 - 2.1/ 06-Aug-2001 02:14 ...
- JavaScript的变量提升机制
变量提升 JavaScript的变量提升有两种,用var声明的变量以及用function声明的变量. 用var声明的变量 我们先来看下面这段代码,a的值是多少 代码1 console.log(a); ...
- 域名和URL各部分组成
什么是域名? 域名,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传 输时标识计算机的电子方位. IP地址是Internet主机的作为路由寻址用的数字型标识,人 ...
- iOS-动态库创建(详解)
https://blog.csdn.net/LisztCoder/article/details/78132147 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...
- Django模板及路由的配置
学习内容: (1)路由的配置 (2)模板的介绍 (3)模板显示数据 一.路由的配置 以上一篇文章的名字Booketest项目,有一个子模块demo1进行讲解. 1.首先在Booktest项目下的同名子 ...
- 判断一个数组是否包含一个指定的值 includes-ES6
var array1 = [1, 2, 3]; console.log(array1.includes(2)); // trueconsole.log(array1.includes(2, 5)); ...
- pip源、搭建虚拟环境、git
一.pip源 1.1 介绍 1.采用国内源,加速下载模块的速度2.常用pip源:-- 豆瓣:https://pypi.douban.com/simple-- 阿里:https://mirrors.al ...
- js中的关键字与保留字
关键字就是指:js中用到的单词,比如var : function: 保留字是指:js以后可能会发展成为关键字的,先保留起来不让你用.比如class,要是给一个对象添加class:obj.classNa ...
- locust --hellp
1. Locust简介 Locust是使用Python语言编写实现的开源性能测试工具,简洁.轻量.高效,并发机制基于gevent协程,可以实现单机模拟生成较高的并发压力. 官网:https://loc ...