vue3如何定義變量
更新時間：2026年05月16日 14:13:27 作者：冰涼小腳
文章主要講述了Vue中ref和reactive兩種定義變量的方法,ref適用于簡單類型數(shù)據(jù),需在setup中定義并return,通過.value獲取和操作；reactive適用于復雜數(shù)據(jù),注意在使用時正確調(diào)用變量
1、定義變量
1.1、ref
一般用來處理簡單類型的數(shù)據(jù)
注意點：
- 定義變量在setup函數(shù)中用vue的ref方法
- 定義的變量以及方法需要setup函數(shù)進行return出來，才可以在html代碼中使用
- 方法中調(diào)用變量需要打點到變量的value進行獲取和操作
<template>
<div>
<div class="count">
count: {{ count }}
</div>
<button @click="countaddFn">count++</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup () {
let count=ref(0)
let countaddFn=()=>{
count.value++
}
return {
count,countaddFn
}
}
}
</script>
1.2、reactive
一般用于定義復雜數(shù)據(jù)
<template>
<div>
<table border="1">
<tr>
<th>id</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr v-for="item in user" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</table>
<button @click="modifyTheFn">修改數(shù)據(jù)</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup () {
// 復雜類型數(shù)據(jù)定義
let user=reactive([
{id:1,name:'張三',age:20,gender:'男'},
{id:2,name:'李四',age:30,gender:'中性'},
{id:3,name:'王五',age:40,gender:'女'},
{id:4,name:'老六',age:50,gender:'未知'},
])
function modifyTheFn(){
user[1].name='老七'
}
return {
user,modifyTheFn
}
}
}
</script>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于你不可不知的Vue.js列表渲染的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-10-10
本篇文章主要介紹了Vue 換膚的示例實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
@change 是 Vue.js 中用于監(jiān)聽表單元素值變化的事件處理器,很多組件有@change事件,那到底如何獲取到當前的參數(shù)呢？本文給大家詳細講解,感興趣的朋友一起看看吧2023-11-11
這篇文章主要給大家介紹了關于Vue路由跳轉(zhuǎn)的5種方式及擴展,在Vue中路由是一種用于導航和管理頁面之間跳轉(zhuǎn)的機制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以參考下2023-11-11
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關于Vue安裝與配置教程的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-06-06
vue.js利用defineProperty實現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當作后臺、jQuery寫前臺AJAX代碼實現(xiàn)用戶登錄和注冊的功能的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了vue組件開發(fā)props驗證的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章主要介紹了vue component 組件使用 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
element?el-tree折疊收縮的實現(xiàn)示例
本文主要介紹了element?el-tree折疊收縮的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊時間獲取時間段查詢功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04