uni-app笔记，未完待续

1.点击变色动画，然后恢复

<template>
	<view>
		<view class="box animated " hover-class="box-hover rubberBand"></view>
	</view>
</template>

<style>
	.box {
		width: 100upx;
		height: 100upx;
		background-color: red;
	}
	.box-hover {
		background-color: green;
	}
</style>

2.class,style几种写法

<template>
	<view>
		<view :class="['style1','style2']">1</view>
		<view :class="[class1,class2]">2</view>
		<view :class="[age<5?class1:'']">3</view>
		<view :class="[age<5?class1:'',sex=='男'?class2:class3]">4</view>
		<view :class="{'style1':!isActive}">5</view>
		
		<view :style="{'color':Color,'font-size':'40upx'}">6</view>
		<view :style="{'font-size':size+'upx'}">7</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class1:"style1",
				class2:"style2",
				class3:"style3",
				age:1,
				sex:"女",
				isActive:true,
				Color:'#ccc',
				size:40
			}
		}
	}
</script>

<style>
	.style1 {
		color: red;
	}
	.style2 {
		background-color: blue;
	}
	.style3 {
		background-color: pink;
	}
</style>

3.v-if

<template>
	<view>
		<!-- <view v-if="isShow">123</view>
		<button type="default" @tap="changeShow()">{{isShow?'隐藏':'显示'}}</button>
		 -->
		<view v-if="(age>20)">{{ age>30?'中年人':'年轻人' }}</view>
		
		<view v-if="isShow">喜欢</view>
		<view v-else>不喜欢</view>
		<button type="default" @tap="changeShow()">{{isShow?'不喜欢':'喜欢'}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow:true,
				age:22
			}
		},
		onLoad() {

		},
		methods: {
            changeShow:function() {
				if(this.isShow) {
					this.isShow = false;
				}else {
					this.isShow = true;
				}
			}
		}
	}
</script>

4.列表渲染 v-for

<template>
	<view>
		<!-- 一维数组 -->
		<view v-for="(val,index) in list1" :key="index">
			索引：{{index}}  内容：{{val}}
		</view>
		<view v-for="(val,index) in list2" :key="index">
			{{val.name}}
		</view>
		<!-- 二维数组 -->
		<view v-for="(val1,index1) in list3" :key="index1">
			<view>{{val1.city}}</view>
			<view v-for="(val2,index2) in val1.list" :key="index2">{{val2}}</view>
		</view>
		<!-- 循环对象 -->
		<view v-for="(val,index) in objList" :key="index">
			{{val}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1:["张三","李四","王五"],
				list2:[
					{name:"张三",age:20},
					{name:"李四",age:23},
					{name:"王五",age:45},
				],
				list3:[
					{
						city:"天津",
						list:["河西区","蓟州区"]
					},
					{
						city:"北京",
						list:["海淀区","昌平区"]
					}
				],
				objList:{
					name1:"篮球",
					name2:"足球"
				}
					
			}
		}
	}
</script>

5.阻止事件冒泡

<view @tap.stop="boxEvent()"></view>

6.监听属性

        data() {
			return {
				name:"啦啦啦"
			}
		},
		watch: {
			name:function(val) {
				console.log(val)
			}
		}

7.计算属性

<view>{{ Weight }}</view>

        data() {
			return {
				weight:1500
					
			}
		},
		computed:{
			Weight:function() {
				return this.weight>1000 ? (this.weight/1000)+'kg':weight+'g'
			}
		}