湖南省水运建设投资集团网站,住房和城乡建设部网站职责,微信公众号手机app,网页设计多少钱一个页面reactive#xff1a;将平常的一个对象转换成响应式对象。所谓的响应式对象就是当页面点击修改此对象时#xff0c;页面无需刷新而在页面上的其他地方有用到这个对象的地方会自动同步修改过来例如#xff1a;
templatediv classcontainerdi…reactive将平常的一个对象转换成响应式对象。所谓的响应式对象就是当页面点击修改此对象时页面无需刷新而在页面上的其他地方有用到这个对象的地方会自动同步修改过来例如
templatediv classcontainerdiv{{obj.name}}/divdiv{{obj.age}}/divbutton clickupdateName修改数据/button/div
/template
script setup
import { reactive, toRef, toRefs } from vue// 1. 响应式数据对象const obj reactive({name: ls,age: 10})const updateName () {obj.name lisi}/script
style scoped langless/style
当点击修改时名字会变成lisi如果不加reactive()则不是响应式对象即修改的时候页面数据不会改变
toref将响应式对象中的一个属性变成响应式属性相当于单列出来一个数据但是这个数据的值还和原响应式对象的值关联在一起。修改其值需要额外添加一个.value即对其.value进行修改才有效。例如
templatediv classcontainerdiv{{name}}/divdiv{{obj.name}}/divdiv{{obj.age}}/divbutton clickupdateName修改数据/button/div
/template
script setup
import { reactive, toRef, toRefs } from vue// 1. 响应式数据对象const obj reactive({name: ls,age: 10})const name toRef(obj, name)const updateName () {// obj.name lisiname.value lisi}/script
style scoped langless/styletorefs是将响应式对象中的所有的属性变成单独的响应式数据而且也和院对象中的值相关联着。例如
templatediv classcontainerdiv{{name}}/divdiv{{age}}/divdiv{{obj.name}}/divdiv{{obj.age}}/divbutton clickupdateName修改数据/button/div
/template
script setup
import { reactive, toRef, toRefs } from vue// 1. 响应式数据对象const obj reactive({name: ls,age: 10})const {name, age} toRefs(obj)const updateName () {// obj.name lisiage.value 200name.value lisi}/script
style scoped langless/style
ref主要是用来定义单独的一个数据(非对象)为响应式数据。例如
templatediv classcontainerdiv{{name}}/divdiv{{age}}/divbutton clickupdateName修改数据/button/div
/template
script setup
import { reactive, toRef, toRefs, ref } from vue// 1. 响应式数据对象// const obj reactive({// name: ls,// age: 10// })//// const {name, age} toRefs(obj)let name ref(jjw)let age ref(0)const updateName () {// obj.name lisiage.value 200name.value lisi}/script另外ref还可以用在标签上边(另议)
