万建站南昌,环球贸易网站,哈尔滨网站建设教学,在百度怎么发布作品1、功能概述
在Vue中定义一个变量#xff0c;这个变量的值不允许被修改#xff0c;核心是通过readonly设置成只读。
如果不会使用ref和reactive响应式数据参考如下博客#xff1a;
https://blog.csdn.net/tangshiyilang/article/details/134701103
2、具体实现
如下案例…1、功能概述
在Vue中定义一个变量这个变量的值不允许被修改核心是通过readonly设置成只读。
如果不会使用ref和reactive响应式数据参考如下博客
https://blog.csdn.net/tangshiyilang/article/details/134701103
2、具体实现
如下案例
1、通过reactive定义一个响应式数据testData并将testData通过readonly设置成只读模式。
2、在setup中设置了一个定时器2s后修改readonlyData中的参数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/script
/head
bodydiv idapp{{readonlyData.name}}/divscript typemoduleconst appVue.createApp({//创建setupsetup(props,context){const {reactive,readonly}Vue;//从vue中引入ref//创建reactive设置响应式数据let testDatareactive({name:小春new Date()});//将值设置只读状态let readonlyDatareadonly(testData);setTimeout((){readonlyData.name大春},2000)return {readonlyData}}});//vue实例只作用于app这个DOM节点中const vmapp.mount(#app);//viewModel是组件帮助我们完成的/script
/body/html3、结果输出
1、从图中可以看出页面中通过{{readonlyData.name}}显示了原始数据”小春”
2、2s之后数据报错set opration on key “name” failed:target is readonly
