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