uni-app 基本语法

1.数据定义和展示

uni-app数据定义和vue的组件方法是一样的，展示方法也一致(双括号语法和v-bind)

<template>
	<view class="content">
		<view :title="title">{{msg}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg:"hello world",
                                title:‘i am a title‘
			}
		}
	}
</script>

2.模版循环

uni-app使用v-for进行模版循环，用法与vue一致

<template>
	<view class="content">
		<view v-for="(item,index) in list" :key="index">{{index}}  - {{item}}</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list:[10,20,30,40]
		}
	}
}
</script>

3.条件编译

还是和vue一样，使用v-if和v-show

<template>
	<view class="content">
		<view v-if="flag">v-if</view>
		<view v-show="flag2">v-show</view>
		<view v-show="flag3">false</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			flag:true,
			flag2:true,
			flag3:false
		}
	}
}
</script>

4.计算属性

还是和vue中的一样，计算属性对data中的数据进行加工过滤，返回处理后的结果。

<template>
	<view class="content">
		<view v-for="(item,i) in filterList" :key="i">{{i}} -- {{item}}</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list:[10,20,30,40,50]
		}
	},
	computed:{
		filterList(){
			//过滤掉20一下的元素
			return this.list.filter( item => {
				return item > 20
			})
		}
	}
}
</script>

5.事件监听和方法注册

事件监听和方法注册和vue一致

<template>
	<view class="content">
		<view>{{title}}</view>	
		<button @click="sayHello">点我触发</button>
		<button @click="test(‘修改后的title‘)">点我修改title</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:"原来的title"
		}
	},
	methods:{
		sayHello(){
			console.log(‘hello‘)
		},
		test(val){
			this.title = val
		}
	}
}
</script>

uni-app 基本语法

原文：https://www.cnblogs.com/OrochiZ-/p/13945625.html