您现在的位置是:首页 > 网站制作 > 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>
 

转自https://blog.csdn.net/qq_33323469/article/details/121381055

Tags:

很赞哦! ()

相关文章

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

点击排行

本站推荐

站点信息

  • 建站时间:2019-1-11
  • 文章统计142篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 建站,写前端联系我:扫描二维码,