文章目录
ref对象类型简介
- 用法: let xx = reactive({xxx:"xxx"})
- 返回值: 一个
Proxy
的对象,就是响应式对象 - 特别注意:
- 既能定义
对象类型
,也能定义基本类型
的响应式数据。但是ref底层还是需要reactive的proxy做响应式数据
- 既能定义
代码展示:
bash
<div>
<div>
<span>游戏名:{{gameDetail.name}}</span>
<span>版本号:{{gameDetail.version}}</span>
<span>大小:{{gameDetail.size}}</span>
</div>
<div>
<button @click="handleChangeGamesDetail">修改内容</button>
</div>
<div>
<ul>
<li v-for="(item,index) in games" :key="index">
<div>
<span>游戏名:{{item.name}}</span>
<span>版本号:{{item.version}}</span>
<span>大小:{{item.size}}</span>
</div>
</li>
</ul>
</div>
<div>
<button @click="handleChangeGames">修改游戏</button>
</div>
</div>
</template>
<script setup lang="ts" name="item">
let gameDetail = reactive({
name:"王者荣耀",version:"1.0",size:"1gb"
})
let games = reactive([
{
name:"王者荣耀",version:"1.0",size:"1gb"
},
{
name:"星际争霸",version:"2.0",size:"2gb"
},
{
name:"魔兽争霸",version:"3.0",size:"3gb"
}
])
const handleChangeGamesDetail = ()=>{
gameDetail.name = "远梦之星"
}
const handleChangeGames = ()=>{
games[0].name = "修改游戏名"
}
</script>
✨ 踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下
📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管
📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管
📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网
📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn
🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545
👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教