您现在的位置是:首页 > 网站制作 > vue3vue3
vue 基础写法
蒙xs2022-04-11【vue3】人已围观
简介<template>
<div class="hello">
<div class="list">
2.实现数据获取
<ul>
<li v-for="(item, index) in arr" :key="index">
<div cl
<template>
<div class="hello">
<div class="list">
2.实现数据获取
<ul>
<li v-for="(item, index) in arr" :key="index">
<div class="imgs">
<img :src="item.cover" alt="" />
</div>
<div class="text">
<p>{{ item.name }}</p>
</div>
</li>
</ul>
<div style="clear:both"></div>
<el-pagination background layout="prev, pager, next" :total="total" @current-change="handpage"></el-pagination>
</div>
</div>
</template>
<script>
import { onBeforeMount, reactive, ref, toRefs } from "vue";
//这里将请求抽离出去 ,当然你也可以在页面中直接使用$axios这样 ,直接在main,js中全局挂载
import { getHomeAllData } from "@/api/home";
export default {
name: "HelloWorld",
props: {
msg: String,
},
setup(props, { emit }) {
let arr = ref([]);
let page = ref(1); //当前页
let total = ref(0);
//请求需要的参数
const parms = reactive({
cursor: page,
size: 10,
testTypeId: 0,
subjectId: 0,
clazzLevel: 0,
classType: 0,
className: "",
});
//生命周期
onBeforeMount(() => {
lista();
});
const lista = () => {
//发送请求
getHomeAllData(parms)
.then((res) => {
arr.value = res.data; //赋值 用ref 生命的需要加value 当然你也可以用reactive 声明一个数组
total.value = res.totalCount
})
.catch((error) => {
});
};
//分页点击
const handpage = (e) => {
//改变分页
page.value =e;
//再次获取数据 在vu3 中取消了this这个东西, 这里直接像我们原先写传统js 中的方法直接 `方法名()`直接调用
lista();
}
return {
//所声明的变量 方法必须导出才能使用
//数据
arr, parms, page, total,// ...toRefs(parms),
//方法
handpage,lista
};
},
};
</script>
<style scoped>
.list {
width: 100%;
background: rgb(228, 220, 220);
}
.list ul li {
width: 300px;
height:260px;
list-style: none;
float: left;
margin: 10px 10px;
box-shadow:inset 0 0 10px 0px rgba(0, 0, 0, 0.14);
cursor: pointer;
}
.list ul li .imgs{
width: 100%;
height: 200px;
overflow: hidden;
}
.imgs img{
width: 100%;
height: 100%;
border-radius: 5px;
transition: all 0.6s;
}
.imgs img:hover{
transform: scale(1.1);
}
.text{
width: 100%;
height: 60px;
font-size: 14px;
margin: 2px 2px;
color: #333;
font-weight: normal;
}
</style>
Tags:
很赞哦! ()
上一篇:返回列表