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 ,
} ,
auto : {
type : Boolean,
default : false
}
} ,
name : "cutdown" ,
}