vue学习笔记 八、toRef的使用
时间:2021-10-11
本文章向大家介绍vue学习笔记 八、toRef的使用,主要包括vue学习笔记 八、toRef的使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、样例效果图:
上图点击“改变内容”后变为下图的内容
二、项目结构截图
三、代码
<template> <div> <h2>toRef的使用</h2> <p> 姓名:{{name }} </p> <p>年龄:{{ age }} </p> <button @click="changeHander">改变内容</button> </div> </template> <script> import {defineComponent,ref,reactive,toRefs} from 'vue' export default defineComponent({ //组件名称 name:'Home', //接收父组建的数据 props:{ }, //定义子组件 components:{ }, setup(props,ctx){ let data =reactive({ name :'yc', age:36 }) //toRefs 可以把一个响应式对象转换为普通的对象。 let state2=toRefs(data); console.log( 'state2==>ref',state2 ) function changeHander(){ // 由于变成了ref,所以我们需要使用value state2.name.value="yangcheng" state2.age.value=37 } return{ changeHander, ...state2 } } }) </script> <style scoped lang="scss"> </style>
原文地址:https://www.cnblogs.com/yclh/p/15393080.html
- Opencv学习(一)——安装配置遇到的问题
- The .NET of Tomorrow
- 国内自动驾驶企业在美国首秀其最新L4级自动驾驶货运卡车
- Nginx源码安装及调优配置
- Greenplum 简单性能测试与分析
- CentOS6 安装couchdb2 集群
- 如何遍历维数和各维上限未定的多维数组
- 求长度的另一种方法(""+obj).Length
- ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现
- GreenPlum 简单性能测试与分析(续)
- 最终版 Reflector v1.0 (+简单的反流程混淆)
- 性能&分布式&NewLife.XCode对无限数据的支持
- ASP.NET MVC下的异步Action的定义和执行原理
- 包学会之浅入浅出Vue.js:结业篇
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法