Introduction to uni app grammar

uni-app Introduction to grammar

Attribute binding and interpolation expression

v-bind:class || :class

• Binding of properties

		<view :class="title" >
			{
   { title }} <br />
			<text v-bind:class="title2">{
   {title2}}</text>
		</view>

Event binding

• @click=“btn1” Event binding abbreviation

	<button type="default" @click="btn1"> Button 1</button>
	<button type="default" v-on:click="btn2"> Button 2</button>

Event modifier

• .stop Stop bubbling
  • That is, the child event will trigger the parent event due to the bubbling event , Use .stop To stop

<template>
	<view>
		 I am a about
		<view class="" @click="c1">
			 I'm the father 
			<view @click.stop="c2"> I am son </view>
		</view>
	</view>
</template>

<script>
	export default {
    
		data() {
    
		},
		methods: {
    
			c1() {
    
				console.log('c1');
			},
			c2() {
    
				console.log('c2');
			}
		}
	}
</script>

<style>

</style>

Two-way binding of data

• Two way binding of data depends on form modification

<input type="text" v-model="title2" />

	export default {
    
		data() {
    
			return {
    	
				title:" I'm a chicken dish ",
				title2:"t2"
			}
		},
	}

Conditional judgment and three eyes

• Three items and v-if

<template>
	<view class="content"> 
		<view :class="title" >
			<button type="default" v-on:click="btn2"> Button 2</button>
			<view v-if="flag">
				{
    {
     flag }}
			</view>
			<view v-else>
				{
    {
     flag }}
			</view>
			<view :class="flag? 'red' : 'pink'">
				{
    {
     flag }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    	
				flag:true
			}
		},
		onLoad() {
    
		},
		methods: {
    
			btn2(){
    
				console.log("btn2")
				this.flag = !this.flag
			},
		}
	}
</script>

<style>
	.red{
    
		color: red;
	}
	.pink{
    
		color: pink;
	}
</style>

• v-if And v-else-if And v-else and v-show

<template>
	<view class="content">
		<view :class="title">
			<button type="default" @click="btn1"> Button 1</button>
			<button type="default" v-on:click="btn2"> Button 2</button>
			<view v-show="flag">
				 I am a show
			</view>
			<view v-if="num == 1">{
    {
    num}}</view>
			<view v-else-if="num == 2">{
    {
    num}}</view>
			<view v-else>{
    {
    num}}</view>
		</view>
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				title2: "t2",
				flag: true,
				num:1
			}
		},
		onLoad() {
    
		},
		methods: {
    
			btn1() {
    
				this.num = 6
			},
			btn2() {
    
				this.flag = !this.flag
				this.num = 2
			},
		}
	}
</script>

<style>
	.red {
    
		color: red;
	}

	.pink {
    
		color: pink;
	}
</style>

The list of rendering

• Use v-for Instructions

<template>
 	<view class="wrap">
			<view v-for="(item,index) in list" :key="index">
				<view>
					{
    {
     item.age }} -- {
    {
     index }}
				</view>
			</view>
 	</view>
 </template>

 <script>
 	export default {
    
 		data() {
    
 			return {
    
				list:[
					{
    
						age:20,
					},
					{
    
						age:30,
					},
					{
    
						age:40,
					},
				]
			}
 		}
 	}
 </script>