vue data中的return使用方法示例

Posted on by

一、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用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：