uni-app基础语法

uni-app模板与数据绑定详解

最新推荐文章于 2025-09-10 21:32:12 发布

原创最新推荐文章于 2025-09-10 21:32:12 发布 · 892 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了uni-app的基础语法，包括模板语法中的变量赋值、数组形式的数据绑定、计算属性的使用，以及列表和条件渲染。讲解了if与hidden在条件展示上的区别，并详细阐述了属性绑定的实现方式。

模板语法

变量赋值

<script>
export default {
	data() {
		return {
			title: 'hello',
			name: 'uni-app'
		}
	}
}
</script>

在视图中使用{{}}调用变量

<template>
	<view class="demo">
		{{title}}--{{name}}
	</view>
</template>

数组形式的数据绑定

<script>
export default {
	data() {
		return {
			students:[
				{name:'张三',age:18},
				{name:'李四',age:20}
			]
		}
	}
}
</script>

在视图中通过数组索引调用

<template>
	<view class="demo">
		{{students[0].name}}
		{{students[1].age}}
	</view>
</template>

计算属性

<template>
	<view class="demo">
		<view>{{message}}</view>
		<view>反转字符串：{{reversedMessage}}</view>
	</view>
</template>

在computed中写上计算属性

<script>
	export default {
		data() {
			return {
				message: 'uniapp'
			}
		},
		computed:{
			//计算属性的 getter
			reversedMessage: function() {
				return this.message.split('').reverse().join('')   //ppainu
			}
		}
	}

列表渲染 v-for,index为索引

<template>
	<view class="container">
		{{students[0].name}}   <!--不循环只想要索引第一个里边的name值-->
		
		<view v-for="(item,index) in students" :key="index">
			{{index}} - {{item.name}} : {{item.age}}
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			students:[
				{name:'张三',age:18},
				{name:'李四',age:20}
			]
		}
	}
}
</script>

条件渲染 v-if v-hidden

<template>
	<view>
		<view v-if="show">
			这里是条件展示的内容
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true   //true显示，false隐藏
		}
	}
}
</script>

<template>
	<view>
		<view :hidden="show">
			这里是条件展示的内容
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true   //true隐藏，false显示
		}
	}
}
</script>

if 与 hidden 区别
if会根据条件决定是否渲染，hidden会渲染但根据条件决定是否展示。

属性绑定
：是修饰符v-bind的简写

<template>
	<view>
		<view :class="{red : isRed}">
			test...
		</view>
		<view :class="[isRed ? 'red' : 'green']">
			test...
		</view>
		<image :src="url"></image>
		<view :style="{color: activeColor,fontSize:fontSize+'px'}">test</view>
		<view :style="styleObject">test</view>  <!--直接绑定到一个样式对象-->
	</view>
</template>

<script>
export default {
	data() {
		return {
			isRed: false,  //样式是否展示，取决于条件true或false
			url: "http://www.zcdekangbei.com/images/product_pic.jpg",
			activeColor: 'red',
			fontSize: 40,
			styleObject: {
				color: #f00,
				fontSize: 20px
			}
		}
	}
}
</script>

<style>
.red{color: #FF0000;}
.green{color: #4CD964;}
</style>