vue?data中的return如何使用

這篇文章主要講解了“vue data中的return如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue data中的return如何使用”吧！

一、vue 里面的data return 是什么？

uniapp項目 vue 結構中data 里面的return詳解

從字面上理解 data 是數據的意思 return是返回的意思,我個人理解的是 將數據返回出去。

二、如何使用

1.vue 雙向綁定 v-model

代碼如下（示例）：

<template>
	<view>
		<input type="text" v-model="reac" placeholder="請輸入內容">
	</view>
</template>
<script>
	export default {
		data() {
			return {
				reac:''
			}
		},
		methods: {
			
		}
	}
</script>
<style>

</style>

其中v-model里面的內容要放到return里面才可以,否則頁面會報錯,放到進去之后也方便我們更好的去取值this.reac就能獲取到我們輸入的值了

2.帶有 ":"的屬性 比如:class、:id等等

這些屬性對應的值都需要放在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: 一般情況下動態樣式建議使用 :class

3. 標簽使用return里面的屬性

語法 {{return對應的屬性}} 他會將屬性里面的值賦給當前標簽

代碼如下(示例)

<template>
	<view>
		<view>{{text}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text:'小樓今夜月重圓，環文萬象無雕鐫，要院落花簾不卷，加拜王門最好官，油云詎比長沙遠'
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

補充：vue中的data為什么會使用return函數

vue中的data為什么會用return函數

如果不使用return包裹的數據會在項目的全局中可見，會造成變量污染；

使用return包裹后數據中變量只在當前組件中生效，不會影響其他組件。

組件是一個可復用的vue實例，如果data是一個普通的對象，那么所有復用這個實例的組件都將引用同一份數據，會造成數據污染。

如果將data封裝成一個函數，實例化組件時只是調用了這個函數生成的副本，避免了數據污染。

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