快捷導(dǎo)航

vue?data中的return使用方法示例

更新時(shí)間：2022年07月28日 16:00:47 作者：世間美好與你

當(dāng)一個(gè)組件被定義,data必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù),因?yàn)榻M件可能被用來(lái)創(chuàng)建多個(gè)實(shí)例,下面這篇文章主要給大家介紹了關(guān)于vue?data中return使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、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里面才可以,否則頁(yè)面會(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>

請(qǐng)?zhí)砑訄D片描述

我們看到 :class里面的值是font.因此我們需要在return里面定義一下這個(gè)屬性格式是font:'font" font屬性的值可以自定義然后將定義好的class類名在下面style里面寫樣式即可

tips: 一般情況下動(dòng)態(tài)樣式建議使用 :class

3. 標(biāo)簽使用return里面的屬性

語(yǔ)法 {{return對(duì)應(yīng)的屬性}} 他會(huì)將屬性里面的值賦給當(dāng)前標(biāo)簽

代碼如下(示例)

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

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

<style>

</style>

請(qǐng)?zhí)砑訄D片描述