首页 > 移动平台 > 详细

uni-app 基本语法

时间:2020-11-08 22:29:44      阅读:48      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!