淺談VUE uni-app 模板語(yǔ)法
更新時(shí)間：2021年10月19日 16:42:58 作者：上晴下雪
這篇文章主要介紹了uni-app 的模板語(yǔ)法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1.v-bind（簡(jiǎn)寫 ：）
組件屬性中要使用data中定義的數(shù)據(jù)變量，或組件屬性要使用表達(dá)式，需用v-bind指定
簡(jiǎn)寫 ：
2.v-on（簡(jiǎn)寫@）
監(jiān)聽(tīng)DOM事件
click.stop 可以阻止事件穿透
3.v-model
數(shù)據(jù)雙向綁定
4.v-if，v-else-if，v-else
條件判斷，決定某個(gè)內(nèi)容是否掛載
5.v-show
條件判斷，決定某個(gè)內(nèi)容是否顯示
6.三元運(yùn)算符
7.空標(biāo)簽 block
8.v-for：列表渲染
<template>
<view v-bind:class="msg" v-bind:data="1+2">
{{msg}} world!-{{num}}
<button v-on:click="show">點(diǎn)我</button>
<input v-model="msg" />
<view v-if="flag">vue</view>
<view v-else>H5</view>
<view>{{flag ? '顯示':'隱藏'}}</view>
<block>
<text>block 空標(biāo)簽 </text>
</block>
<view v-for="(item, index) in arr">{{index+1}}:{{item}}</view>
<view @click="c1">
父級(jí)
<view @click.stop="c2">子級(jí)</view>
</view>
</view>
</template>
<script>
export default{
//初始化數(shù)據(jù),
//data:{},使用對(duì)象形式數(shù)據(jù)不會(huì)發(fā)生變化，不推薦
data(){
return {
msg:'hello',//變量
arr:['vue','H5','CSS'],//數(shù)組
flag:true,//布爾值
num: 1
}
},
onLoad(){
setTimeout(()=>{
this.num++;
},2000)
},
methods:{
show(){
console.log('點(diǎn)了');
this.flag=!this.falg;
},
c1(){
console.log('我是父級(jí)');
},
c2(){
console.log('我是子級(jí)');
}
}
}
</script>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要為大家介紹了vite與xcode環(huán)境變量配置記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)的問(wèn)題及解決方法
這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)要怎么解決,項(xiàng)目場(chǎng)景我是傳遞一個(gè)string字符給后端時(shí)候報(bào)錯(cuò)，隨手把這個(gè)問(wèn)題記錄下來(lái)了，需要的朋友可以參考下解決方案2022-11-11
vue請(qǐng)求接口并且攜帶token的實(shí)現(xiàn)
本文主要介紹了vue請(qǐng)求接口并且攜帶token的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問(wèn)題
這篇文章主要介紹了解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue如何通過(guò)配置代理來(lái)解決跨域請(qǐng)求的問(wèn)題，文中的示例代碼講解詳細(xì)，對(duì)我們深入學(xué)習(xí)vue有一定的幫助，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
vue項(xiàng)目如何去掉URL中#符號(hào)的方法
在開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項(xiàng)目如何去掉URL中#符號(hào)的相關(guān)資料,文中通過(guò)實(shí)例代碼的非常詳細(xì),需要的朋友可以參考下2022-07-07
vuex實(shí)現(xiàn)購(gòu)物車的增加減少移除
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車的增加減少移除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
解決Mint-ui 框架Popup和Datetime Picker組件滾動(dòng)穿透的問(wèn)題
這篇文章主要介紹了解決Mint-ui 框架Popup和Datetime Picker組件滾動(dòng)穿透的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue 巧用過(guò)渡效果(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09