1、遍历和条件渲染，直接上代码

<template>
	<view>
		<view>{{isLog}}</view>
		<view class="title">事件修饰符</view>
		
		<view>
			<button @click.once="biaobai">爱就一个字，我就说一次</button>
			<!--
			事件修饰符
				.once 响应一次
				.prevent 阻止默认事件
				.stop 停止事件冒泡
			表单修饰符
				.number 转换为数字
				.lazy chang事件触发 默认是input事件
			按键修饰符
				.up .right .bottom .left
				.space .delete .enter .esc 
			 -->
			 
		</view>
		<view class="title">事件绑定</view>
		<view>
			<button @tap="say('vue很easy？')">vue很easy</button>
			<button type="warn" @tap="say('uni很简单吗？')">uni-很简单</button>
			<button @click="showMsg($event,'61儿童节快乐')">61儿童节快乐</button>
			<button @click="showMsg" type="primary" >事件响应函数不带（）</button>
			<button @click="showMsg()" >事件响应函数带（）</button>
			<button @click="showMsg($event)" >事件响应函数带（$event）</button>
			<button v-on:click="isLog=!isLog" type="primary">行内事件</button>
			<button @click="isLog=!isLog" type="warn">简写行内事件</button>
		</view>
		<view class="title">表单绑定</view>
		<view>
			<view>中国最好的城市：{{bestCity}}</view>
			<radio-group name="" @change="bestCity=$event.detail.value">
				<label>
					<radio value="上海" /><text>上海</text>
				</label>
				<label>
					<radio value="郑州" /><text>郑州</text>
				</label>
				<label>
					<radio value="北京" /><text>北京</text>
				</label>
				<label>
					<radio value="深圳" /><text>深圳</text>
				</label>
			</radio-group>
			<view>{{favSel}}</view>
			<checkbox-group name="" @change="favSel=$event.detail.value">
				<label>
					<checkbox value="游泳" /><text>游泳</text>
				</label>
				<label>
					<checkbox value="唱歌" /><text>唱歌</text>
				</label>
				<label>
					<checkbox value="跳舞" /><text>跳舞</text>
				</label>
			</checkbox-group>
			<input v-model="msg" />
			<view>{{msg}}</view>
			<switch type="checkbox" :checked="isCheck" @change="isCheck=$event.detail.value"></switch>
			<button :disabled="!isCheck" type="warn">提交</button>
		</view>
		<view class="title">遍历</view>
		<view>
			<view v-for="(value,key) in person" :key="key">{{key}}:{{value}}</view>
			<view v-for="item in list" :key="item">{{item}}</view>
			<view v-for="(item,index) in 'I love China'" :key="item+index">{{item}}</view>
			<view v-for="item in 5" :key="item">{{item}}</view>
		</view>
		<view class="title">条件渲染</view>
		<view>
			<view v-if="score>=80">奖励小汽车</view>
			<view v-else-if="score>=60">奖励摩托车</view>
			<view v-else>思过崖面壁九年</view>
			<view v-if="isLog">你好派大星</view>
			<view v-else>你好海绵宝宝</view>
		</view>
		<view class="title">文本渲染</view>
		<view>
			<view>uni-app v3版本</view>
			<view>{{msg}}</view>
			<view>{{2+3}}</view>
			<view>{{msg.split('').reverse().join('')}}</view>
			<view>{{msg.length>6?'文字长':'短短短'}}</view>
			<view v-html="richMsg"></view>
			<text v-text="msg"></text>
		</view>
</view>
</template>
<script>
	export default {
		data() {
			return {
				msg: "你好uni-app",
				richMsg: "你好<strong>富</strong>文本",
				isLog: false,
				score: 59,
				list: ["vue", 'react', '小程序'],
				person: {
					name: "mumu",
					age: 18
				},
				isCheck: false,
				favSel: [],
				bestCity: '',

			}
		},
		methods: {
			biaobai(){
				uni.showToast({title:'我爱你'})
			},
			say(msg){
				uni.showModal({
					title:msg
				})
			},
			showMsg(e,msg='春天花会开！'){
				console.log(e,"事件参数")
				uni.showToast({
					title:msg
				})
			},
			checkChange(e) {
				console.log(e);

				this.selFav = [...e.detail.value];
				console.log(this.selFav)
			}
		}

	}
</script>
<style lang="scss" scoped>
	
</style>