vue 基础教程（五）数据请求方式：fetch 和axios 计算属性（基本用法，模糊查询）

最新推荐文章于 2022-07-31 22:10:44 发布

小白追梦

最新推荐文章于 2022-07-31 22:10:44 发布

阅读量472

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/109037166

版权

本文是Vue基础教程的第五部分，主要讲解如何使用fetch和axios进行数据请求，以及计算属性的基本用法和实现模糊查询功能。fetch API提供了获取JSON数据并自定义样式的方法，而计算属性则用于实现字符串首字母大写和模糊查询等操作，有助于提升用户体验。

摘要由CSDN通过智能技术生成

1 fetch

w3c 基本写法需要两个then 才能拿到数据
第一个.then 拿到的是对象里面包含请求体请求头响应部分第二个.then 拿到的才是真正的数据

// 里面的test.json 直接去网上下载一个测试使用的json文件就行
fetch("./test.json")
      .then((res) => {
   
        return res.json();
      })
      .then((res) => {
   
        console.log(res);
      });

做点更多的事情，我想展示在vue里面并且尝试在页面渲染出来

<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <body>
    <div id="box">
      <button @click="handleClick()">点击显示信息</button>
      <ul>
        <li v-for="data in dataList">
        // 这个地方将json文件内的标题 取出来 
          {
   {
   data.title}}
         // 这个地方是将json文件内的部分图片取出来 展示
          <img :src="data.topicImg" alt="" />
        </li>
      </ul>
    </div>
  </body>
  <script>
    var vm = new Vue({
   
      el: "#box",
      data: {
   
        dataList: [],
      },
      methods: {
   
        handleClick() {
   
          fetch("./test.json")
            .then((res) => {
   
              return res.json(<