ahxin/Vue3-learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

reaction 对象的使用 v-for

Browse Source
This commit is contained in:
云上贵猪 2025-04-29 21:07:08 +08:00
parent 95413620f5
commit 93379692b2
2 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.idea/workspace.xml generated
View File

@ -4,7 +4,7 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="ref 的简单实用">
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="ref 变量 和 reaction 对象的使用">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
</list>
@ -83,7 +83,15 @@
<option name="project" value="LOCAL" />
<updated>1745930547660</updated>
</task>
<option name="localTasksCounter" value="4" />
<task id="LOCAL-00004" summary="ref 变量 和 reaction 对象的使用">
<option name="closed" value="true" />
<created>1745931199936</created>
<option name="number" value="00004" />
<option name="presentableId" value="LOCAL-00004" />
<option name="project" value="LOCAL" />
<updated>1745931199936</updated>
</task>
<option name="localTasksCounter" value="5" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -94,6 +102,7 @@
<MESSAGE value="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue" />
<MESSAGE value="setup 的新写法" />
<MESSAGE value="ref 的简单实用" />
<option name="LAST_COMMIT_MESSAGE" value="ref 的简单实用" />
<MESSAGE value="ref 变量 和 reaction 对象的使用" />
<option name="LAST_COMMIT_MESSAGE" value="ref 变量 和 reaction 对象的使用" />
</component>
</project>

24
src/components/Person.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import {ref, reactive} from "vue";
import {reactive, ref} from "vue";
// 单数据
let name = ref('张三')
@ -9,9 +9,22 @@ let car = reactive(
{brand: '小米 su 7', prive: 30}
)
// 游戏数据
let geame = reactive(
[
{id: '1', name: '王者荣耀'},
{id: '2', name: '黑神话·悟空'},
{id: '3', name: '地平线5'},
]
)
function geameFast(){
geame[0].name = '打wa'
}
function changeName() {
name.value = '李四'
}
function changePrive() {
// 价格修改
car.prive += 10
@ -20,10 +33,11 @@ function changePrive(){
<template>
<main>
<h1>{{name}}买了一辆{{car.brand}},价值{{car.prive}}万</h1>
<button @click="changeName">修改名字</button>
<button @click="changePrive">修改价格</button>
<h1>游戏列表</h1>
<ul>
<li v-for="g in geame" :key="g.id">{{g.name}}</li>
</ul>
<button @click="geameFast">修改第一个游戏明细</button>
</main>
</template>