vue?data中的return如何使用

這篇文章主要講解了“vue data中的return如何使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“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ù)污染。

感謝各位的閱讀，以上就是“vue data中的return如何使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue data中的return如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！