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!


Related articles: