网站怎么做推广和宣传,网页设计与制作论文5000字,张家界做网站的人,深圳石岩建网站08使用toRefs和toRef toRefs()函数将person对象中的name和age属性转换为响应式引用#xff0c;并返回一个对象#xff0c;对象中的name和age属性都是响应式引用#xff0c;具有响应式功能。 toRef()函数将person对象中的name属性转换为响应式引用#xff0c;并返回一个响应…08使用toRefs和toRef toRefs()函数将person对象中的name和age属性转换为响应式引用并返回一个对象对象中的name和age属性都是响应式引用具有响应式功能。 toRef()函数将person对象中的name属性转换为响应式引用并返回一个响应式引用具有响应式功能。 案例截图 目录结构 代码
Person.vue templatediv classpersonh1我是 Person 组件/h1h2名字:{{ person.name }}/h2h2数量:{{ person.age }} /h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickshowAdd查看信息/button/div
/templatescript langts setup
import { c } from vite/dist/node/types.d-aGj9QkWt;
import { reactive,ref,toRef,toRefs } from vue
// 数据
let person reactive({name: 太上老君,age: 18000,add: 兜率宫。兜率宫位于江西省鹰潭市的龙虎山是道教的重要圣地之一。它被认为是太上老君的道场位于离恨天之上是道教神话中兜率天宫的一部分。兜率宫原址位于龙虎山天门山有着悠久的历史和文化背景。,
})// let {name,age} person //直接解构的变量name和age没有响应式功能只是单纯的变量
// console.log(name,age)// let {name,age} toRefs(person) // toRefs()函数将person对象中的name和age属性转换为响应式引用并返回一个对象对象中的name和age属性都是响应式引用具有响应式功能。
// console.log(name,age)let name toRef(person,name) // toRef()函数将person对象中的name属性转换为响应式引用并返回一个响应式引用具有响应式功能。
console.log(name)
console.log(person)// 方法
function showAdd() {alert(person.add)
}
function changeName() {// person.name person.name 太上老君 ? 孙悟空 : 太上老君name.value name.value 太上老君 ? 孙悟空 : 太上老君console.log(name.value)
}
function changeAge() {person.age 1console.log(person.age)
}
/scriptstyle scoped
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
/style
