On VUE uni app Template Syntax
- 2021-11-29 06:02:01
- OfStack
1. v-bind
To use the data variables defined in data in component properties, or to use expressions in component properties, you need to specify them with v-bind
Abbreviation:
2. v-on (abbreviation @)
Listening for DOM Events
click. stop can prevent event penetration
3.v-model
Data bidirectional binding
4. v-if, v-else-if, v-else
Conditional judgment, which determines whether something is mounted or not
5.v-show
Conditional judgment, which determines whether a certain content is displayed or not
6.3 yuan operator
7. Empty label block
8. v-for: List rendering
<template>
<view v-bind:class="msg" v-bind:data="1+2">
{{msg}} world!-{{num}}
<button v-on:click="show"> Order me </button>
<input v-model="msg" />
<view v-if="flag">vue</view>
<view v-else>H5</view>
<view>{{flag ? ' Display ':' Hide '}}</view>
<block>
<text>block Empty label </text>
</block>
<view v-for="(item, index) in arr">{{index+1}}:{{item}}</view>
<view @click="c1">
Parent
<view @click.stop="c2"> Sub-level </view>
</view>
</view>
</template>
<script>
export default{
// Initialization data ,
//data:{}, Data in the form of objects will not change, which is not recommended
data(){
return {
msg:'hello',// Variable
arr:['vue','H5','CSS'],// Array
flag:true,// Boolean value
num: 1
}
},
onLoad(){
setTimeout(()=>{
this.num++;
},2000)
},
methods:{
show(){
console.log(' It's clicked ');
this.flag=!this.falg;
},
c1(){
console.log(' I am the parent ');
},
c2(){
console.log(' I am a child ');
}
}
}
</script>
Summarize
This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!