网站是不是网页,网站开发需求问卷,seo引擎搜索网站关键词,网站空间免文章目录一、使用ref1. 引入2. 定义ref变量3. 赋值.value4. return 返回值5. 将数据渲染到页面二、使用reactive 和 toRef1. 引入2. 定义reactive变量3. 赋值变量.对象4. return 返回值5. 将数据渲染到页面三、效果图源码3.1. 效果图3.2. 源码一、使用ref
1. 引入
从vue里面引…
文章目录一、使用ref1. 引入2. 定义ref变量3. 赋值.value4. return 返回值5. 将数据渲染到页面二、使用reactive 和 toRef1. 引入2. 定义reactive变量3. 赋值变量.对象4. return 返回值5. 将数据渲染到页面三、效果图源码3.1. 效果图3.2. 源码一、使用ref
1. 引入
从vue里面引入ref函数
import {defineComponent, onMounted, ref} from vue;2. 定义ref变量
从vue里面引入ref函数 const ebooks ref();3. 赋值.value ebooks.value data.content;4. return 返回值
在setup结尾处return 返回值 return {ebooks};5. 将数据渲染到页面 {{ebooks}}二、使用reactive 和 toRef
1. 引入
从vue里面引入reactive 和 toRef函数
import {defineComponent, onMounted, ref,reactive,toRef} from vue;2. 定义reactive变量
从vue里面引入reactive函数
const ebooks1 reactive({books: []});3. 赋值变量.对象 ebooks1.books data.content;4. return 返回值
在setup结尾处return 返回值 return {booklist : toRef(ebooks1,books)};5. 将数据渲染到页面 {{booklist }}三、效果图源码
3.1. 效果图 3.2. 源码
templatea-layouta-layout-sider width200 stylebackground: #fffa-menumodeinlinev-model:selectedKeysselectedKeys2v-model:openKeysopenKeys:style{ height: 100%, borderRight: 0 }a-sub-menu keysub1template #titlespanuser-outlined/subnav 1/span/templatea-menu-item key1option1/a-menu-itema-menu-item key2option2/a-menu-itema-menu-item key3option3/a-menu-itema-menu-item key4option4/a-menu-item/a-sub-menua-sub-menu keysub2template #titlespanlaptop-outlined/subnav 2/span/templatea-menu-item key5option5/a-menu-itema-menu-item key6option6/a-menu-itema-menu-item key7option7/a-menu-itema-menu-item key8option8/a-menu-item/a-sub-menua-sub-menu keysub3template #titlespannotification-outlined/subnav 3/span/templatea-menu-item key9option9/a-menu-itema-menu-item key10option10/a-menu-itema-menu-item key11option11/a-menu-itema-menu-item key12option12/a-menu-item/a-sub-menu/a-menu/a-layout-sidera-layout-content:style{ background: #fff, padding: 24px, margin: 0, minHeight: 280px }pre{{ebooks}}/prepre{{booklist}}/pre/a-layout-content/a-layout
/templatescript langtsimport {UserOutlined, LaptopOutlined, NotificationOutlined} from ant-design/icons-vue;import axios from axios;import {defineComponent, onMounted, ref,reactive,toRef} from vue;export default defineComponent({name: Home,components: {UserOutlined,LaptopOutlined,NotificationOutlined,},setup() {console.log(setup);//使用ref函数const ebooks ref();//使用reactive函数 定义接收返回对象的变量以及类型const ebooks1 reactive({books: []});//声明周期函数onMounted(() {console.log(onMounted)axios.get(http://localhost:8888/ebook/list?nameSpring).then((response) {const data response.data;// 使用ref 接收返回值ebooks.value data.content;//使用reactive 接收返回值ebooks1.books data.content;console.log(response);});});return {// 使用ref 将返回值返回ebooks,//使用reactive 将返回值返回booklist : toRef(ebooks1,books)};}});
/script
