淺談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)寫(xiě) ：）
組件屬性中要使用data中定義的數(shù)據(jù)變量，或組件屬性要使用表達(dá)式，需用v-bind指定
簡(jiǎn)寫(xiě) ：
2.v-on（簡(jiǎn)寫(xiě)@）
監(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)文章
眾所周知在vue移動(dòng)端h5頁(yè)面當(dāng)中,適配是經(jīng)常會(huì)遇到的問(wèn)題,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目適配大屏端的相關(guān)資料,需要的朋友可以參考下2021-08-08
vue.extend與vue.component的區(qū)別和聯(lián)系
這篇文章主要介紹了vue.extend與vue.component的區(qū)別和聯(lián)系，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
vue+VeeValidate 校驗(yàn)范圍實(shí)例詳解（部分校驗(yàn),全部校驗(yàn)）
validate（)可以指定校驗(yàn)范圍內(nèi)，或者是全局的 字段。而validateAll()只能校驗(yàn)全局。這篇文章主要介紹了vue+VeeValidate 校驗(yàn)范圍（部分校驗(yàn)，全部校驗(yàn)） ,需要的朋友可以參考下2018-10-10
vue3中的ref,toRef,toRefs三個(gè)的作用使用小結(jié)
Vue3中ref、reactive、toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，就此做一份筆記作為區(qū)別，本文重點(diǎn)給大家講解vue3中的ref，toRef，toRefs三個(gè)是干嘛的，有什么作用，感興趣的朋友跟隨小編一起看看吧2022-11-11
Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式
本文主要介紹了Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章簡(jiǎn)單給大家介紹了Vue項(xiàng)目中使用keep-Alive步驟，在vue2.1.0之前，實(shí)現(xiàn)方式也給大家作了簡(jiǎn)單介紹，感興趣的朋友跟隨腳本之家小編一起看看吧2018-07-07
當(dāng)協(xié)議,域名,端口其中某一個(gè)不一致的時(shí)候,就會(huì)產(chǎn)生跨域問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中該如何解決跨域問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue本地模擬服務(wù)器請(qǐng)求mock數(shù)據(jù)的方法詳解
這篇文章主要給大家介紹了關(guān)于vue本地模擬服務(wù)器請(qǐng)求mock數(shù)據(jù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁(yè)面示例詳解
這篇文章主要為大家介紹了vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁(yè)面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11