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