vue3数据绑定显示列表数据局

一、第一种ref

1. 案例代码

<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import axios from "axios";

export default defineComponent({
  name: 'Home',
  setup() {

    // 定义响应式变量
    const ebooks = ref();

    // 生命周期函数
    onMounted(() => {
      axios.get("/ebook/list").then((response) => {
        console.log("后端返回:", response)
        const data = response.data;
         // 响应式变量赋值
        ebooks.value = data.content;
      });
    });

    return {
      ebooks,
    }
  }
});
</script>

2.页面使用

 {{ebooks}}
1

二、第一种reactive,toRef

2.1. 案例代码

<script lang="ts">
import {defineComponent, onMounted, reactive,toRef} from 'vue';
import axios from "axios";

export default defineComponent({
  name: 'Home',
  setup() {

    const ebooks2 = reactive({ books: []});

    // 生命周期函数
    onMounted(() => {
      axios.get("http://localhost:8080/ebook/list").then((response) => {
        console.log("后端返回:", response)
        const data = response.data;
  
        ebooks2.books = data.content;
      });
    });

    return {
      ebooksList: toRef(ebooks2,"books"),
    }
  }
});
</script>

2.2. 页面使用

 {{ebooks}}
1