淺談VUE uni-app 模板語法
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)文章
vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號的問題及解決方法
這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號要怎么解決,項目場景我是傳遞一個string字符給后端時候報錯,隨手把這個問題記錄下來了,需要的朋友可以參考下解決方案2022-11-11解決vue+webpack項目接口跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue+webpack項目接口跨域出現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題
這篇文章主要介紹了解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11