位置：首页-资讯-前端开发

vue data中的return使用方法示例

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

一、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>

请添加图片描述