vue?data中的return使用方法示例
一、vue 里面的data return 是什么？
uniapp項目 vue 結(jié)構(gòu)中data 里面的return詳解
從字面上理解 data 是數(shù)據(jù)的意思 return是返回的意思,我個人理解的是 將數(shù)據(jù)返回出去。
二、如何使用
1.vue 雙向綁定 v-model
代碼如下（示例）：
<template>
<view>
<input type="text" v-model="reac" placeholder="請輸入內(nèi)容">
</view>
</template>
<script>
export default {
data() {
return {
reac:''
}
},
methods: {
}
}
</script>
<style>
</style>
其中v-model里面的內(nèi)容要放到return里面才可以,否則頁面會報錯,放到進去之后也方便我們更好的去取值
this.reac就能獲取到我們輸入的值了
2.帶有 ":"的屬性 比如:class、:id等等
這些屬性對應(yīng)的值都需要放在
return里面,
代碼如下（示例）：
<template>
<view>
<view :class="font">6666</view>
</view>
</template>
<script>
export default {
data() {
return {
font:'font'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.font{
color: #4CD964;
font-size: 50rpx;
}
</style>
我們看到 :class里面的值是font.因此我們需要在return里面定義一下這個屬性 格式是font:'font" font屬性的值可以自定義 然后將定義好的class類名在下面style里面寫樣式即可
tips: 一般情況下動態(tài)樣式建議使用 :class
3. 標(biāo)簽使用return里面的屬性
語法 {{return對應(yīng)的屬性}} 他會將屬性里面的值賦給當(dāng)前標(biāo)簽
代碼如下(示例)
<template>
<view>
<view>{{text}}</view>
</view>
</template>
<script>
export default {
data() {
return {
text:'小樓今夜月重圓，環(huán)文萬象無雕鐫，要院落花簾不卷，加拜王門最好官，油云詎比長沙遠'
}
},
methods: {
}
}
</script>
<style>
</style>
補充：vue中的data為什么會使用return函數(shù)
vue中的data為什么會用return函數(shù)
如果不使用return包裹的數(shù)據(jù)會在項目的全局中可見，會造成變量污染；
使用return包裹后數(shù)據(jù)中變量只在當(dāng)前組件中生效，不會影響其他組件。
組件是一個可復(fù)用的vue實例，如果data是一個普通的對象，那么所有復(fù)用這個實例的組件都將引用同一份數(shù)據(jù)，會造成數(shù)據(jù)污染。
如果將data封裝成一個函數(shù)，實例化組件時只是調(diào)用了這個函數(shù)生成的副本，避免了數(shù)據(jù)污染。
總結(jié)
到此這篇關(guān)于vue data中的return使用方法的文章就介紹到這了,更多相關(guān)vue data中return用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue移動端使用canvas簽名的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了解決vue移動端適配問題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
echarts是我們后臺系統(tǒng)中最常用的數(shù)據(jù)統(tǒng)計圖形展示,外界對它的二次封裝也不計層數(shù),這篇文章主要介紹了vue3.x對echarts的二次封裝之按需加載,需要的朋友可以參考下2023-09-09
$emit是Vue實例的一個方法,它用于觸發(fā)自定義事件,本文主要為大家詳細介紹了Vue如何使用$emit進行組件通信,感興趣的小伙伴可以跟隨小編咦學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了Vue中的父子組件傳值.sync,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue子組件調(diào)用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
本文主要介紹了vue中實現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個字段轉(zhuǎn)換,一種是表格table中的整列字段轉(zhuǎn)換,具有一定的參考價值,感興趣的可以了解一下2023-11-11
Vue+UpLoad實現(xiàn)上傳預(yù)覽和刪除圖片的實踐
本文主要介紹了Vue+UpLoad實現(xiàn)上傳預(yù)覽和刪除圖片的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了Vue使用預(yù)渲染代替SSR的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
VueX?mapGetters獲取Modules中的Getters方式
這篇文章主要介紹了VueX?mapGetters獲取Modules中的Getters方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08