淺談VUE uni-app 模板語法
更新時間：2021年10月19日 16:42:58 作者：上晴下雪
這篇文章主要介紹了uni-app 的模板語法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
1.v-bind（簡寫 ：）
組件屬性中要使用data中定義的數據變量，或組件屬性要使用表達式，需用v-bind指定
簡寫 ：
2.v-on（簡寫@）
監(jiān)聽DOM事件
click.stop 可以阻止事件穿透
3.v-model
數據雙向綁定
4.v-if，v-else-if，v-else
條件判斷，決定某個內容是否掛載
5.v-show
條件判斷，決定某個內容是否顯示
6.三元運算符
7.空標簽 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 空標簽 </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{
//初始化數據,
//data:{},使用對象形式數據不會發(fā)生變化，不推薦
data(){
return {
msg:'hello',//變量
arr:['vue','H5','CSS'],//數組
flag:true,//布爾值
num: 1
}
},
onLoad(){
setTimeout(()=>{
this.num++;
},2000)
},
methods:{
show(){
console.log('點了');
this.flag=!this.falg;
},
c1(){
console.log('我是父級');
},
c2(){
console.log('我是子級');
}
}
}
</script>
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
眾所周知在vue移動端h5頁面當中,適配是經常會遇到的問題,這篇文章主要給大家介紹了關于vue項目適配大屏端的相關資料,需要的朋友可以參考下2021-08-08
vue.extend與vue.component的區(qū)別和聯系
這篇文章主要介紹了vue.extend與vue.component的區(qū)別和聯系，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
vue+VeeValidate 校驗范圍實例詳解（部分校驗,全部校驗）
validate（)可以指定校驗范圍內，或者是全局的 字段。而validateAll()只能校驗全局。這篇文章主要介紹了vue+VeeValidate 校驗范圍（部分校驗，全部校驗） ,需要的朋友可以參考下2018-10-10
vue3中的ref,toRef,toRefs三個的作用使用小結
Vue3中ref、reactive、toRef、toRefs都是與響應式數據相關的，就此做一份筆記作為區(qū)別，本文重點給大家講解vue3中的ref，toRef，toRefs三個是干嘛的，有什么作用，感興趣的朋友跟隨小編一起看看吧2022-11-11
Vue-router不允許導航到當前位置(/path)錯誤原因以及修復方式
本文主要介紹了Vue-router不允許導航到當前位置(/path)錯誤原因以及修復方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章簡單給大家介紹了Vue項目中使用keep-Alive步驟，在vue2.1.0之前，實現方式也給大家作了簡單介紹，感興趣的朋友跟隨腳本之家小編一起看看吧2018-07-07
當協議,域名,端口其中某一個不一致的時候,就會產生跨域問題,下面這篇文章主要給大家介紹了關于Vue項目中該如何解決跨域問題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關于vue本地模擬服務器請求mock數據的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
這篇文章主要為大家介紹了vue+three.js實現炫酷的3D登陸頁面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了vue實現商城購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11