Vue篇——购物车案例

利用Vue实现购物车的简单运用


  • 借助layui框架实现组件(如table)的快速搭建
  • 通过Vue实现从后端获取数据到前端的展示
  • 实现移除书籍功能(添加和修改书籍信息功能暂未实现)
  • 实现书籍购买数量的增加或减少,并且能够实现总价格的动态变化

程序效果截图Vue篇——购物车案例_第1张图片


实现代码

  • 首先导入layui的关键代码,笔者将其放在本项目的同级目录下(layui关键代码可在官方处下载,这里不再赘述)
  • 创建html、css和JavaScript目录

html


<html>
	<head>
		<meta charset="utf-8">
		<title>书籍购物车title>
		
		<link rel="stylesheet" href="../layui/css/layui.css" />
		
		<style type="text/css">
			#app {
      
				width: 700px;
				height: 320px;
				margin: 100px auto;
			}

			.layui-table {
      
				width: 700px;
			}

			.layui-table th {
      
				text-align: center;
				line-height: normal;
			}

			.sbtn {
      
				width: 20px;
			}
		style>
	head>
	<body>
		<div id="app">
			<h2 style="text-align: center;font-weight: 100;color: #009688;">购物车h2>
			<div v-if="books.length">
				
				<table class="layui-table">
					<colgroup>
						<col width="100">
						<col width="200">
						<col>
					colgroup>
					<thead>
						<tr>
							<th>
								<i class="layui-icon layui-icon-release" style="font-size: 30px; color: #1E9FFF;">i>
							th>
							<th style="text-align: center;">书籍名称th>
							<th style="text-align: center;">出版时间th>
							<th style="text-align: center;">价格th>
							<th style="text-align: center;">购买数量th>
							<th style="text-align: center;">操作th>
						tr>
					thead>
					<tbody>
						<tr v-for="(item,index) in books">
							<td style="text-align: center;">{
    {item.id}}td>
							<td>{
    {item.name}}td>
							<td>{
    {item.data}}td>
							<td>{
    {item.price|showPrice}}td>
							<td>
								<button class="layui-btn layui-btn-primary layui-btn-xs sbtn" 
								@click="debtnClick(index)" 
								:disabled="item.count<=1"
								 :class="{ 'layui-btn-disabled':item.count<=1}">-button>
								<label>{
    {item.count}}label>
								<button class="layui-btn layui-btn-primary layui-btn-xs sbtn" 
								@click="inbtnClick(index)">+button>
							td>
							<td style="text-align: center;">
								<button class="layui-btn layui-btn-primary removebtn" 
								@click="removebtn(index)">移除button>
							td>

						tr>
						<tr>
							<td>总价格td>
							<td colspan="5" style="text-align: right;">{
    {totlePrice|showPrice}}td>
						tr>

					tbody>
				table>
			div>
			<div v-else>购物车为空div>
		div>
	body>
	
	<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js">script>
	<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js">script>
	<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">script>
	
	<script src="../layui/layui.js">script>
	
	<script src="main.js">script>
html>

JavaScript

new Vue({
     
	el: '#app',
	data: {
     
		// 书籍数据
		books: [{
     
				id: 1,
				name: '《算法导论》',
				data: '2006-09',
				price: '85.00',
				count: '1'
			},
			{
     
				id: 2,
				name: '《UNIX编程艺术》',
				data: '2006-02',
				price: '59.00',
				count: '1'
			},
			{
     
				id: 3,
				name: '《数据库》',
				data: '2008-10',
				price: '39.00',
				count: '1'
			},
			{
     
				id: 4,
				name: '《代码大全》',
				data: '2006-03',
				price: '128.00',
				count: '1'
			},
		]
	},
	// 过滤器
	filters: {
     
		showPrice(price) {
     
			return '¥' + parseFloat(price).toFixed(2)
		}
	},
	methods: {
     
		// 书籍数量减少
		debtnClick(index) {
     
			this.books[index].count--
		},
		// 书籍数量增加
		inbtnClick(index) {
     
			this.books[index].count++
		},
		// 移除书籍
		removebtn(index){
     
			this.books.splice(index,1)
		}
	},
	computed:{
     
		// 计算总价格
		totlePrice(){
     
			let totlePrice=0
			for(let i=0;i<this.books.length;i++){
     
				totlePrice+=this.books[i].price*this.books[i].count
			}
			return totlePrice
		}
	}

})

你可能感兴趣的:(前端开发,vue)