//今天来做个简单的商品添加管理页面(用vue和localStorage实现)
首先来了解下vue的几个指令:
- {{}} =>插值
- v-bind 动态绑定属性 => 缩写 :属性
- v-if 动态创建/删除
- v-show 动态显示/隐藏
- v-on:click 绑定事件 => 缩写 @事件
- v-for 遍历
- v-model 双向绑定表单
- v-cloak 防止表达式闪烁
一、html页面布局
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
//引入bootstrap库,需要自己下载放入到对应的文件夹中,也可以直接链接bootcdn给的链接
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
.off {
color: #e0e0e0;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container" id="app">
<h1>购物车</h1>
<form action="">
<div class="form-group">
<label for="pro_name">商品名称</label>
<input type="text" class="form-control" id="pro_name" placeholder="请输入商品名称">
</div>
<div class="form-group">
<label for="pro_price">商品单价</label>
<input type="text" class="form-control" id="pro_price" placeholder="请输入商品单价">
</div>
<div class="form-group">
<label for="pro_num">商品数量</label>
<input type="text" class="form-control" id="pro_num" placeholder="请输入商品数量">
</div>
<div class="form-group">
<label for="shelf_on">是否上架</label>
<input type="radio" id="shelf_on" name="is_shelf" checked />上架
<input type="radio" id="shelf_off" name="is_shelf" />下架
</div>
<div>
<input type="button" value="添加商品" class="btn btn-success" @click="add_product" />
</div>
</form>
<table class="table">
<caption>
<h3>商品展示</h3>
</caption>
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>小计</th>
<th>当前状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="product,index in products" v-bind:class="{ off:!product.is_shelf}">
<td>{{index+1}}</td>
<td>{{product.pro_name}}</td>
<td>{{product.pro_num}}</td>
<td>{{product.pro_price}}</td>
<td>{{product.pro_num*product.pro_price}}</td>
<td>{{product.is_shelf ? "上架" : "下架"}}</td>
<td>
<input type="button" class="btn btn-primary" value="改变状态" @click="change_shelf(index)" />
<input type="button" class="btn btn-danger" value="删除" @click="del_product(index)" />
</td>
</tr>
</tbody>
</table>
</div>
二、js代码实现
//使用vue框架需要下架vue文件
<script src="./js/vue.js"></script>
<script>
new Vue({
//挂载到id名为app的区域
//也可以选择一些类名,但是不推荐,因为挂载只能给一个挂载,多个vue会报错
el: "#app",
//created:function(){//在这里执行vue实例化对象后立即要做的事情}
created() {
//判断localstorage里面是否存在data
if (!this.get_data()) {
//不存在就创建一个空数组
localStorage.setItem("data", "[]");
} else {
//存在就遍历该数组并且添加到vue的products数组里面
this.get_data().forEach(item => {
this.products.push(item)
});
}
},
data: {
//存放数据区域
products: []
},
methods: {
//添加按钮触发该函数
add_product() {
let product = {
pro_name: $("#pro_name").value,
pro_num: Number($("#pro_num").value),
pro_price: Number($("#pro_price").value),
is_shelf: $("#shelf_on").checked? true : false
}
this.products.push(product);
this.set_data(this.products);
}
,
//改变按钮触发该函数
change_shelf(i) {
this.products[i].is_shelf = !this.products[i].is_shelf;
this.set_data(this.products);
}
,
//删除按钮触发该函数
del_product(i) {
this.products.splice(i, 1);
this.set_data(this.products);
}
,
//获取localstorage中名为data的数据
get_data() {
return JSON.parse(localStorage.getItem("data"));
}
,
//将arr保存到localstorage中且名为data
set_data(arr) {
localStorage.setItem("data", JSON.stringify(arr));
}
}
})
function $(ele) {
let query = null;
if (ele[0] === "#") {
query = document.querySelector(ele);
} else {
query = document.querySelectorAll(ele);
}
return query;
}
</script>
</body>