文章目錄

• • • • • 一、第一種ref
        • • 1. 案例代碼
          • 2.頁(yè)面使用
        • 二、第一種reactive,toRef
        • • 2.1. 案例代碼
          • 2.2. 頁(yè)面使用

一、第一種ref

1. 案例代碼

<script lang="ts"> import {defineComponent, onMounted, ref} from 'vue'; import axios from "axios";export default defineComponent({name: 'Home',setup() {// 定義響應(yīng)式變量const ebooks = ref();// 生命周期函數(shù)onMounted(() => {axios.get("/ebook/list").then((response) => {console.log("后端返回:", response)const data = response.data;// 響應(yīng)式變量賦值ebooks.value = data.content;});});return {ebooks,}} }); </script>

2.頁(yè)面使用

{{ebooks}}

二、第一種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: []});// 生命周期函數(shù)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. 頁(yè)面使用

{{ebooks}}

總結(jié)

以上是生活随笔為你收集整理的vue3数据绑定显示列表数据局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。