代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.JS-监听属性-简单的购物车</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
<!--定义购物车的表格样式-->
<style type="text/css">
table {
border: 1px solid black;/*黑色、1px的边框*/
}
table {
width: 100%;/*宽度*/
}
th {
height: 50px;/*高度*/
}
th, td {
border-bottom: 1px solid #ddd;/*底部边框*/
}
</style>
</head>
<body>
<!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值-->
<div id="app">
<!--定义购物车表-->
<table >
<!--标题部分-->
<tr>
<th>序号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<!--下面循环显示数组sjs的手机产品内容-->
<!--sjs是一个对象数组，每个数组的元素代表一个商品的信息：产品id、产品名称、价格、数量-->
<!--下面代码中的sj 代表一个产品对象-->
<tr v-for="sj in sjs">
<td>{{sj.id}}</td><!--商品id，对象内的属性值访问使用点号.-->
<td>{{sj.mingcheng}}</td><!--商品名称，对象内的属性值访问使用点号.-->
<td>{{sj.jiage}}</td><!--商品价格，对象内的属性值访问使用点号.-->
<td>
<!--每次点击数量减1-->
<button v-on:click="sj.shuliang=sj.shuliang-1" >-</button>
{{sj.shuliang}} <!--显示当前的数量-->
<!--每次点击数量加1-->
<button v-on:click="sj.shuliang=sj.shuliang+1">+</button>
</td>
<td>
<!--讲对应的商品数量重新设置为0-->
<button v-on:click="sj.shuliang=0">清0</button>
</td>
</tr>
</table>
<div>总价：{{feiyong()}}</div>
</div>
<script>
//Vue语句-开始
var vm = new Vue({
el: '#app', //app为前面div区块的id的值，通过"#"号绑定
data: {
//定义一个产品数组，每个数组的元素是一个对象，每个对象是包含手机的产品信息
//下面的数组定义了3个产品
sjs:[
{
id:1,
mingcheng:"iphone 6",
jiage: 3000,
shuliang:1
},
{
id:2,
mingcheng:"iphone 7",
jiage: 5000,
shuliang:1
},
{
id:3,
mingcheng:"iphone 8",
jiage: 7000,
shuliang:1
}
]
},
//方法定义区块
methods:{
//自定义一个方法，用于计算所有的产品费用
feiyong:function(){
var fy = 0; //初始化
//下面根据产品数组的长度，循环叠加计算出总费用
for(var x=0;x<this.sjs.length;x++){
fy = fy + this.sjs[x].jiage * this.sjs[x].shuliang;
}
return fy; //返回值
}
}
})//Vue语句-结束
</script>
</body>
</html>效果图小白教程网www.2d5.net 
|
