轮播图
<template>
<div id="app">
// v-show='i==n'当i等于
<img v-for="(v,i) in imgs" :key="i" :src="v" v-show="i==n">
</div>
</template>
<script>
export default {
data(){
return{
//定义轮播的图片
imgs:[
"/img/2_01.61467ca9.gif",
"/img/2_02.2cc6117c.gif",
"/img/2_03.3e743a50.gif"
],
//定义一个标记点
n:0
}
},
methods:{
//执行轮播的函数
fun:function(){
setInterval(this.play,2000)
},
//定义要轮播的函数
play:function(){
this.n++;
if(this.n==this.imgs.length){
this.n=0;
}
}
},
//调用
mounted:function(){
this.fun()
}
}
</script>
购物车
//json
[
{"id": 0,"name": "上衣","img": "/logo.png","price": 100,"num": 1, "ischeck": false },
{"id": 1,"name": "上衣","img": "/logo.png","price": 90,"num": 1,"ischeck": false},
{"id": 2,"name": "上衣","img": "/logo.png","price": 80,"num": 1,"ischeck": false},
{"id": 3,"name": "上衣","img": "/logo.png","price": 70,"num":1,"ischeck": false},
{"id": 4,"name": "上衣","img": "/logo.png","price": 60,"num": 1,"ischeck": false}
]
<template>
<div class="home">
<table class="tableDiv">
<thead>
<tr>
<td><input type="checkbox" v-model="checkArr" @click="checkArrFn" /> 全选</td>
<td>商品名称</td>
<td>商品图片</td>
<td>商品价格</td>
<td>商品数量</td>
<td>小计</td>
<td>操作</td>
</tr>
</thead>
<tbody>
//渲染从vuex中拿到的数据
<tr v-for="(v, i) in list" :key="i">
<td> //复选框的状态 //改变状态的点击事件
<input type="checkbox" v-model="v.ischeck" @click="checkListFn(v)" />
</td>
<td>{{ v.name }}</td>
<td><img :src="v.img" alt="" style="width: 50px" /></td>
<td>{{ v.price }}</td>
<td> //点击数量++
<button @click="addFn(v)">+</button>
<span>{{ v.num }}</span>
//点击数量--
<button @click="delFn(v)">-</button>
</td>
//小计
<td>{{ v.num * v.price }}</td>
//删除事件
<td><button @click="del(i)">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总金额</td>
<td>{{ priceFn }}</td> //{{priceFn}}执行computed里面的priiceFn函数
<td>总数量</td>
<td>{{ numFn }}</td> //{{numFn}}执行computed里面的numFn函数
</tr>
</tfoot>
</table>
</div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import axios from "axios";
export default {
data() {
return {
checkArr: false, //上面多选框的状态
};
},
methods: {
//vuex里面的事件
...mapActions(["setListAsync"]),
//数量++的点击事件
addFn(value) {
//循环判断id是不是一样 一样的让里面的数量++
this.list.forEach((v) => {
if (v.id == value.id) {
v.num++;
}
});
//存储到vuex里面
this.setListAsync(this.list);
},
//数量--的点击事件
delFn(value) {
//循环判断id是不是一样 一样的让里面的数量--
this.list.forEach((v) => {
if (v.id == value.id) {
if (v.num > 0) {
v.num--;
} else {
v.num = 0;
}
}
});
//存储到vuex里面
this.setListAsync(this.list);
},
//上面多选框状态改变的函数
checkArrFn() {
this.checkArr = !this.checkArr;
this.list.forEach((v) => {
v.ischeck = this.checkArr;
});
//存到vuex里面
this.setListAsync(this.list);
},
//改变状态的点击函数
checkListFn(v) {
//取反
v.ischeck = !v.ischeck;
//判断是不是全部选中， 全部选中 上面的复选框也选中
this.checkArr = this.list.every((v) => {
return v.ischeck == true;
});
//存储到vuex里面
this.setListAsync(this.list);
},
//删除事件的函数
del(i) {
//删除
this.list.splice(i, 1);
//判断是不是全部删除完 全删完 人=让上面的复选框为不选中状态
if (this.list.length == 0) {
this.checkArr = false;
}
//存储到vuex里面
this.setListAsync(this.list);
},
},
computed: {
//获取vuex里面的数据
...mapState(["list"]),
//总价钱
priceFn() {
let num = 0;
//循环判断复选框是不是选中 选中数量和价钱相乘 再相加
this.list.forEach((v) => {
if (v.ischeck) {
console.log(v);
num += v.num * v.price;
}
});
return num;
},
//总数量
numFn() {
let num = 0;
//循环判断复选框是不是选中 选中数量相加
this.list.forEach((v) => {
if (v.ischeck) {
console.log(v);
num += v.num;
}
});
return num;
},
},
mounted() {
//判断复选框是不是全选中，全选中 上面的复选框也选中
this.checkArr = this.list.every((v) => {
return v.ischeck == true;
});
},
created() {
//判断vuex里面有没有存值
if (!sessionStorage.getItem("vuex").length == 0) {
//通过axios获取json里面的数据
axios
.get("/data.json")
.then((res) => {
//存储到vuex里面
this.setListAsync(res.data);
})
.catch((err) => {
console.log(err);
});
}
},
};
</script>
//样式
<style lang="less" scoped>
.home {
width: 100%;
.tableDiv {
width: 800px;
border: 1px solid #cccccc;
td {
text-align: center;
border: 1px solid #cccccc;
}
}
}
</style>
//store.js
import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate"; //持久化
Vue.use(Vuex);
export default new Vuex.Store({
state: {
list: [],
},
mutations: {
setList(state, val) {
state.list = val;
},
},
actions: {
setListAsync({ commit }, val) {
commit("setList", val);
},
},
modules: {},
plugins: [
createPersistedState({
storage: window.sessionStorage,
}),
],
});
