vue实现购物车的监听
利用vue简单实现购物车的监听，供大家参考，具体内容如下
主要运用的vue的监听，有兴趣的可以看看实现过程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用vue实现对购物车的监听</title>
<script src="../vue.js"></script>
<style type="text/css">
table{
border: 1px solid black;
width: 100%;
text-align: center;
}
th{
height: 50px;
}
th, td{
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="app">
<h1>订单系统</h1>
<table>
<tr>
<th>编号</th>
<th>名称</th>
<th>品牌</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr v-for="val in items">
<td>{{val.id}}</td>
<td>{{val.name}}</td>
<td>{{val.pinpai}}</td>
<td>{{val.price}}</td>
<td>
<!-- 如果count等于0执行v-bind
绑定一个点击事件 -->
<button v-bind:disabled="val.count === 0" @click="val.count-=1">-</button>
{{val.count}}
<button @click="val.count+=1">+</button>
</td>
<td>
<button v-on:click="val.count = 0">移除</button>
</td>
</tr>
</table>
<!-- 调用totalPrice -->
你所需要支付总额为：${{totalPrice()}}
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el:"#app",
data:{
items:[{
id:1,
name:'上衣',
pinpai:'阿迪达斯',
price:100,
count:1
},
{
id:2,
name:'裤子',
pinpai:'安踏',
price:528,
count:1
},
{
id:3,
name:'鞋子',
pinpai:'耐克',
price:999,
count:1
}]
},
methods:{
totalPrice:function(){
var totalPri = 0;
//总价等于数量乘以数量
for(var i=0;i<this.items.length;i++){
totalPri += this.items[i].price*this.items[i].count;
}
return totalPri;
}
}
});
</script>
</body>
</html>
实现效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
更多精彩内容其他人还在看
jQuery中图片展示插件highslide.js的简单dom
前言
今天用用了一款图片展示插件highslide.js，感觉用起来很是舒畅，几乎不用怎么写代码，只需要知道如何写参数就行了。
那么这么牛叉的插件我们该如何用哪，下面我就跟大家讲解一下。
一、引入
首先我们运用绝对路径引入，这一般都是在实际项目中引用的方法，我们下载时候会... 查看详情
收藏 0赞 0分享
基于vue-ssr的静态网站生成器VuePress 初体验
什么是VuePress
VuePress由两部分组成：一个基于Vue的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。 它是为了满足Vue自己的子项目文档的需求而创建的。
VuePress为每一个由它生成的页面提供预加载的html，不仅加载速度极佳，同时对s... 查看详情
收藏 0赞 0分享
Angular数据绑定机制原理
1.Angular.js扩展浏览器的事件循环
浏览器持续等待例如用户交互这样的事件。当你在一个<input>标签里输入字符之后，这个事件的回调函数在JS解释器中执行了其包含的DOM操作，执行完毕后，浏览器响应地对DOM做出了变化。Angular拓展了这个事件循环，使... 查看详情
收藏 0赞 0分享
微信小程序如何像vue一样在动态绑定类名
小程序 开发中遇到这样一个问题...
排行榜开发的时候，前三名的样式不同，其余的样式一样。但是都是通过同一元素来遍历的,当时卡了一下。后来发现有module模块化这一概念,于是查了下api，一下子就做出来了。
就是不同名次上边的样式根据实际情况展示效果。
模... 查看详情
收藏 0赞 0分享
Vue进度条progressbar组件功能
效果图
首先我们看一下进度条组件运行出来的效果，如下图显示
进度条组件
实现过程
◾ 项目搭建
progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具，生成的工作目录如下，其中各个文件夹的... 查看详情
收藏 0赞 0分享
redux中间件之redux-thunk的具体使用
redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispat... 查看详情
收藏 0赞 0分享
JS实现二维数组横纵列转置的方法
我想将一个二维数组横纵列转过来，我就不信只有我有这个需求，可是百度了好久，四海八荒都找遍了……
后来证明还是大神说的google好用 ~ 第一条就是，鄙视臭百度
此番记录下来，也方便各位道友查阅（好想说“仙友”，最近被一部剧毒害的后遗症 ~~~）
var n... 查看详情
收藏 0赞 0分享
关于Angularjs中跨域设置白名单问题
在config中注入$sceDelegateProvider服务使用resourceUrlWhitelist([])方法添加白名单
跨域时将method的属性设置为"jsonp"就可以访问了
app.config(["... 查看详情
收藏 0赞 0分享
浅析vue中常见循环遍历指令的使用 v-for
vue中循环遍历使用的指令是v-for
1.v-for遍历数组
(1)value in arr 遍历数组中的元素
(2)(value,index) in arr 遍历数组中的元素和数组下标
运行代码：
<body>
<div class=... 查看详情
收藏 0赞 0分享
vue双向数据绑定知识点总结
1.原理
vue的双向数据绑定的原理相信大家都十分了解；主要是通过ES5的Object对象的defineProperty属性；重写data的set和get函数来实现的
所以接下来不使用ES6进行实际的代码开发；过程中如果函数使用父级this的情况；还是使用显示缓存中间变量... 查看详情
收藏 0赞 0分享