uni-app笔记

1、文本渲染

<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>

2、条件渲染

<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>

3、遍历

<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>

4、表单绑定

<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>

5、事件绑定

			<button @tap="say('vue很easy？')">vue很easy</button>
			<button type="warn" @tap="say('uni很简单吗？')">uni-很简单</button>
			<button @click="showMsg($event,'38妇女节快乐')">38妇女节快乐</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>

6、组件传参

<cutdown :seconds="10" @stop="stopHd" ref="cutdown1" :auto="true"></cutdown>
<cutdown :seconds="100" ref="cutdown2" ></cutdown>

//子组件接收
export default {
		props:{
			seconds:{ //倒计秒数
				type:Number,
				default:1,//如果是引用类型 default必须是一函数
			},
			auto:{ //是否自动倒计时
				type:Boolean,
				default:false
			}
		},
		name:"cutdown",
		}

持续更新中。。。。。。