淺談VUE uni-app 模板語法
1.v-bind(簡寫 :)
組件屬性中要使用data中定義的數據變量,或組件屬性要使用表達式,需用v-bind指定
簡寫 :
2.v-on(簡寫@)
監聽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:{},使用對象形式數據不會發生變化,不推薦 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>
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!