vue图书小案例
小知识点：
vue中计算属性有缓存（对象属性变化时才会更新），方法没有缓存，所以计算属性比方法效率高
js中let有块级作用域，var没有块级作用域，所以var是有缺陷的
this.letters[0] = 'bb'; //vue中，这种做法并不是响应式的；推荐使用响应式方法：this.letters.splice(0,1,'cc');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<ul v-if="books.length">
<ul>
<li v-for="(v,k) in books">
<button @click="add(k,false)" :disabled="v.num <= 1">-</button>
<input type="text" :value="v.num">
<button @click="add(k,true)">+</button> <div>{{v.name}}</div>
<div>{{v.price * v.num | showPrice}}</div> <button @click="rm(k)">移除</button>
</li>
</ul>
总价{{total_price | showPrice}}
</ul> <div v-else>当前没有图书</div>
</div>
</body>
<script>
let v = new Vue({
el : "#app",
data : {
books : [
{
name : '天龙八部',
price : 33,
num : 1,
},
{
name : '鹿鼎记',
price : 13,
num : 1,
},
]
},
methods : {
add : function(k,boo){
let obj = this.books[k];
if(boo) {
obj.num+=1;
}else{
obj.num-=1;
}
//this.books.splice(k,k+1,obj);
},
rm : function(k){
this.books.splice(k,1);
}
},
// 计算属性
computed : {
total_price : function(){
let total = 0;
for(let i = 0;i < this.books.length;i++ ){
total += (this.books[i].price * this.books[i].num);
}
return total;
}
},
// 过滤器
filters : {
showPrice : function(price){
return '$' + price.toFixed(2);
}
}
})
</script>
</html>
vue图书小案例的更多相关文章
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- Vue.js小案例(2)
即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...
- Vue.js小案例(1)
数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...
- 一个VUE的小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue小案例（一）
案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...
- Android JSON解析库Gson和Fast-json的使用对比和图书列表小案例
Android JSON解析库Gson和Fast-json的使用对比和图书列表小案例 继上篇json解析,我用了原生的json解析,但是在有些情况下我们不得不承认,一些优秀的json解析框架确实十分的 ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式
代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...
- vue小案例--简易评论区
一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...
随机推荐
- Spark学习之路 （九）SparkCore的调优之数据倾斜调优[转]
调优概述 有的时候,我们可能会遇到大数据计算中一个最棘手的问题--数据倾斜,此时Spark作业的性能会比期望差很多.数据倾斜调优,就是使用各种技术方案解决不同类型的数据倾斜问题,以保证Spark作业的 ...
- 如果在vscode 中用运行快捷键（Ctrl+Alt+N）出现中文的乱码
在VSCODE中,运行代码的快捷方式是Ctrl+Alt+N,终止 代码运行的方式是Ctrl+Alt+M,但是有时候会出现汉字的乱码,这种情况并不是代码有问题,只要在terminal 中运行代码就可以了 ...
- Pots POJ - 3414【状态转移bfs+回溯】
典型的倒水问题: 即把两个水杯的每种状态视为bfs图中的点,如果两种状态可以转化,即可认为二者之间可以连一条边. 有3种倒水的方法,对应2个杯子,共有6种可能的状态转移方式.即相当于图中想走的方法有6 ...
- linux100讲——03 什么是linux
1.linux 有两种含义: 一种是linus 编写的开源操作系统的内核 另一种是广义的操作系统 2.linux的第一印象 服务端操作系统和客户端操作系统要做的事情不一样 命令行操作方式与图形界面的差 ...
- git pull报错you do not have permission to pull from the repository
you do not have permission to pull from the repository解决方法 使用git进行项目的版本管理,换了台电脑,配置了账号和邮箱后,pull一个项目 ...
- selenimu--find_element_by_css_selector()方法汇总
一.单一属性定位 type selector driver.find_element_by_css_selector('input') id 定位 driver.find_element_by_css ...
- MySql快速入门(四)
在之前我们对MySql已经有了基本的了解,接下来我们就来接触MySql的分库分表,请往下阅读: 分库分表之MyCat实现 分库分表介绍: 随着微服务这种架构的兴起,我们应用从一个完整的大的应用,切分为 ...
- java面试记录一：跳表、判断二叉树相同、冒泡排序、cookie和session的区别、设计模式（单例、工厂、模板方法、原型、代理、策略）、抽象类与接口的区别
1.什么是跳表? 跳表实际上就是多层链表 跳表可用在让链表的元素查询接近线性时间 代码结构及java实现参考博客园随笔 2.判断两棵二叉树是否相同?(结构相同,内容相同) 思路:(1)先定义树节点Tr ...
- 深入浅出聊一聊Docker
网易云信IM私有化部分用到Docker技术,今天我们就深入浅出来聊聊Docker. Docker是什么? Docker是一个工具,能把应用打包部署于container里,这里可以把container看 ...
- wx: wx.showModal 回调函数中调用自定义方法
一.在回调函数中调用自定义方法: 回调函数中不能直接使用this,需要在外面定义 var that = this 然后 that.自定义的方法.如下: //删除 onDelete: function ...