vue 数据data-uniapp

data 属性

data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

	//正确用法，使用函数返回对象
	data() {
		return {
			title: 'Hello'
		}
	}

	//错误写法，会导致再次打开页面时，显示上次数据
	data: {
		title: 'Hello'
	}

	//错误写法，同样会导致多个组件实例对象数据相互影响
	const obj = {
		title: 'Hello'
	}
	data() {
		return {
			obj
		}
	}

return 外可以写一些复杂计算：

<script lang="ts">
	export default {
		data() {
			const date = new Date()
			return {
				year: date.getFullYear() as number
			}
		}
	}
</script>

data数据在template中有2种绑定方式：

1. text区域使用{{}}。详见插值
2. 属性区域通过:属性名称，在属性值里直接写变量。详见v-bind

<template>
	<view class="content">
		<button @click="buttonClick" :disabled="buttonEnable">{{title}}</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: "点我",
				buttonEnable: false
			}
		},
		methods: {
			buttonClick: function () {
				this.buttonEnable = true
				this.title = "被点了，不能再点了"
			},
		}
	}
</script>

复制代码

data数据在script中引用，通过this.的方式。如果在某些methods中this被指向了其他内容，则需要提前把this赋值给另一个变量，比如let that = this。

<script>
	export default {
		data() {
			return {
				connectedWifi:""
			}
		},
		methods: {
			buttonClick: function () {
				const that = this // 下面的this指向会变化，另存一下
				uni.startWifi({
					success: function() {
						uni.getConnectedWifi({
							success: function(res) {
								const { wifi } = res
								that.connectedWifi = JSON.stringify(wifi)
							},
							fail: function(res) {
							}
						})
					},
					fail: function(res) {
					}
				})
			},
		}
	}
</script>