uniapp模板语法、计算属性、监听属性_uniapp 计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46314560/article/details/104736384

本文详细介绍了uniapp中的模板语法，包括data属性、文本插值、v-bind指令等。接着讲解了计算属性的使用，如反转消息、调用方法等，并提到了计算属性的get和set方法。最后，探讨了侦听属性，用于观察和响应数据变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.模板语法

一.data属性
data 必须声明为返回一个初始数据对象的函数

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

二.模板语法—插值
1.文本（使用双大括号插值）{{ }}
2.通过 v-once 指令，可以执行一次性插值，当数据改变时，插值处的内容不会更新。
3.双大括号会将数据解释为普通文本，为了输出真正的 HTML，需要使用 v-html 指令
4.Mustache 语法不能作用在 HTML attribute（特性）上，应该使用 v-bind 指令
5.v-if 指令将根据表达式 seen 的值的真假来插入/移除 元素。
6. v-on 指令，用于监听 DOM 事件

<template>
	<view>
		<view>{{msg}}</view>
		<text v-once>{{text}}</text>
		<view>使用双大括号:{{ rawHtml }}</view>
		<view v-html="rawHtml">使用v-html:</view>
		<view v-bind:class="color">蓝色</view>
		<view v-if="seen">现在你看到我了</view>
	</view>
</template>

export default {
	data:function() {
		return {
			msg:"hi uniapp!",
			text:"一次性插值,不改变",
			rawHtml:'<text :style="{color:red}">这是红色</text>',
			color:'blue',
			seen:true,
			
		}
	}
}

二.计算属性

1.reversedMessage 反转
.reversedMessage 依赖于 .message，因此当 .message 发生改变时，所有依赖 .reversedMessage 的绑定也会更新。

<view>Original message:{{ message }}</view>
<view>Computed reversed message:{{ reversedMessage }}</view>

export default {
	data:function() {
		return {
			message:'Hello'
		}
	},
	computed: {
	    // 计算属性的 getter
	    reversedMessage: function () {
	      // `this` 指向 vm 实例
	      return this.message.split('').reverse().join('')
	    }
	}
}
// 结果：Hello/olleH

2.也可以通过在表达式中调用方法来达到同样的效果：

<view>Reversed message: {{ reversedMessage() }}</view>

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

3.计算属性的 setter
计算属性默认只有 getter，需要时也可以提供一个 setter：

<view>{{fullName}}</view>

export default {
	data:function() {
		return {
			firstName:'Dell',
			lastName: 'Lee'
		}
	},
	computed: {
	   fullName:{
			get: function () {
				return this.firstName + " " + this.lastName;
			},
			set: function (value) {
			   var arr = value.split(" ");
			   this.firstName = arr[0];
			   this.lastName = arr[1];
			}
		}
	}
}

在这里插入图片描述
注：get用来获取属性值，同时计算生成新的值。
set：用来改变传过来的值，发生改变的时候，同时让数据的内容也发生改变。

三.侦听属性

观察和响应 Vue 实例上的数据变动：watch

<view>{{fullName}}</view>

export default {
	data:function() {
		return {
			firstName: 'Foo',
			lastName: 'Bar',
			fullName: 'Foo Bar'
		}
	},
	watch: {
		firstName: function (val) {
			this.fullName = val + ' ' + this.lastName
		},
		lastName: function (val) {
			this.fullName = this.firstName + ' ' + val
		}
	}
}
// 结果：Foo  Bar