前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·007【uni-app和vue.js基础快速上手】

最新推荐文章于 2024-04-20 05:50:22 发布

God-Excious

最新推荐文章于 2024-04-20 05:50:22 发布

阅读量441

点赞数 1

分类专栏： # 前端开发开发学习文章标签： html5 vue.js 前端 app

本文链接：https://blog.csdn.net/qq_44220418/article/details/105313468

版权

开发学习同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

前端开发

8 篇文章 0 订阅

订阅专栏

注：前言、目录见 https://god-excious.blog.csdn.net/article/details/105312456

【014】view和text组件和动画使用

常见的尺寸单位

官方文档 https://uniapp.dcloud.io/frame?id=尺寸单位

view组件

视图容器

属性说明

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

说明
1. 可以给浮动时的class属性设置浮动时的CSS样式
2. 如果要引入动画，可以在浮动前的class中加入animated，在浮动后的class中加入样式对应的class名

text组件

文本

属性说明

属性名类型默认值说明平台差异说明
selectable Boolean false 文本是否可选
space String 显示连续空格 App、H5、微信小程序
decode Boolean false 是否解码 App、H5、微信小程序
space 值说明

值说明
ensp 中文字符空格一半大小
emsp 中文字符空格大小
nbsp 根据字体设置的空格大小
说明
1. 可以用换行符\n换行
2. 设置selectable属性以设置文字能否被选中，这个属性前要加上英文冒号:
3. 可以在文本内容中使用相应的space值来设置相应的空格，形如&emsp;

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选
space	String		显示连续空格	App、H5、微信小程序
decode	Boolean	false	是否解码	App、H5、微信小程序

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

使用示例

<template>
	<view>
		<view class="view-box animated" hover-class="view-box-hover flash" hover-stay-time="800">
			第一个view
		</view>
		
		<text :selectable="true">这是text\n这是text组件\n这是text组件\n</text>
	</view>
</template>

<script>
	
</script>

<style>
	.view-box {
		width: 200upx;
		height: 200upx;
		background-color: #007AFF;
	}
	
	.view-box-hover {
		background-color: #8A6DE9;
	}
</style>

【015】uni-app的CSS3选择器

官方文档 https://uniapp.dcloud.io/frame?id=选择器

注意点

常规的CSS选择器，如类选择器、id选择器、标签选择器、子代选择器、多重选择器等，都是可以正常使用的

如果要选中在父标签下的第 $i$ 个子标签，判断其是否满足选中条件后，再给予样式，可以用nth-child()

<template>
	<view>
		<view class="box">
			<text>2333</text>
			<view>1</view>
			<view>2</view>
			<view>3</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		background-color: #0A98D5;
		width: 500upx;
		height: 500upx;
		margin: 100upx;
		padding: 50upx;
		color: #ffffff;
	}
	
	.box view {
		font-size: 50upx;
	}
	
	.box>view:nth-child(1) {
		background-color: red;
	}
	
	.box>view:nth-child(2) {
		background-color: green;
	}
	
	.box>view:nth-child(3) {
		background-color: yellow;
	}
</style>

如果要选中在父标签下的第 $i$ 个满足选中条件的子标签，给予样式，可以用nth-of-type()

<template>
	<view>
		<view class="box">
			<text>2333</text>
			<view>1</view>
			<view>2</view>
			<view>3</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		background-color: #0A98D5;
		width: 500upx;
		height: 500upx;
		margin: 100upx;
		padding: 50upx;
		color: #ffffff;
	}
	
	.box view {
		font-size: 50upx;
	}
	
	.box>view:nth-of-type(1) {
		background-color: red;
	}
	
	.box>view:nth-of-type(2) {
		background-color: green;
	}
	
	.box>view:nth-of-type(3) {
		background-color: yellow;
	}
</style>

如果要选中在父标签下的第一个子标签、最后一个子标签，判断其是否满足选中条件后，再给予样式，可以用first-child、last-child

<template>
	<view>
		<view class="box">
			<text>2333</text>
			<view>1</view>
			<view>2</view>
			<view>3</view>
			<view>4</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		background-color: #0A98D5;
		width: 500upx;
		height: 500upx;
		margin: 100upx;
		padding: 50upx;
		color: #ffffff;
	}
	
	.box view {
		font-size: 50upx;
	}
	
	.box>view:first-child {
		background-color: red;
	}
	
	.box>view:last-child {
		background-color: pink;
	}
</style>

如果要选中在父标签下的第一个、最后一个满足选中条件的子标签，给予样式，可以用first-of-type、last-of-type

<template>
	<view>
		<view class="box">
			<text>2333</text>
			<view>1</view>
			<view>2</view>
			<view>3</view>
			<view>4</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		background-color: #0A98D5;
		width: 500upx;
		height: 500upx;
		margin: 100upx;
		padding: 50upx;
		color: #ffffff;
	}
	
	.box view {
		font-size: 50upx;
	}
	
	.box>view:first-of-type {
		background-color: red;
	}
	
	.box>view:last-of-type {
		background-color: pink;
	}
</style>

奇偶选择器

写法一

<template>
	<view>
		<view class="box">
			<!-- <text>2333</text> -->
			<view>1</view>
			<view>2</view>
			<view>3</view>
			<view>4</view>
			<view>5</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		background-color: #0A98D5;
		width: 500upx;
		height: 500upx;
		margin: 100upx;
		padding: 50upx;
		color: #ffffff;
	}
	
	.box view {
		font-size: 50upx;
	}
	
	.box>view:nth-of-type(2n-1) {
		background-color: red;
	}
	
	.box>view:nth-of-type(2n) {
		background-color: green;
	}
</style>

写法二

<template>
	<view>
		<view class="box">
			<text>2333</text>
			<view>1</view>
			<view>2</view>
			<view>3</view>
			<view>4</view>
			<view>5</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		background-color: #0A98D5;
		width: 500upx;
		height: 500upx;
		margin: 100upx;
		padding: 50upx;
		color: #ffffff;
	}
	
	.box view {
		font-size: 50upx;
	}
	
	.box>view:nth-of-type(odd) {
		background-color: red;
	}
	
	.box>view:nth-of-type(even) {
		background-color: green;
	}
</style>

【016】flex布局快速上手

官方文档 https://uniapp.dcloud.io/frame?id=flex布局

知识点

样式	简介	备注
`display: flex;`	设置flex容器
`flex-direction: colomn;`	设置flex容器的主轴方向为纵向	默认为横向（`row`）
`flex-direction: row`;	设置flex容器的主轴方向为横向	默认为横向（`row`）
`flex-wrap: wrap;`	设置flex容器根据flex元素大小进行换行
`flex-wrap: wrap-reverse;`	设置flex容器根据flex元素大小进行反向换行
`justify-content: center;`	设置flex容器中的flex元素在主轴方向上居中
`justify-content: space-between;`	设置flex容器中的flex元素在主轴方向上两端对齐
`justify-content: flex-start;`	设置flex容器中的flex元素在主轴方向上整体靠着起始位置排列
`justify-content: flex-end;`	设置flex容器中的flex元素在主轴方向上整体靠着末尾位置排列
`align-items: center;`	设置flex容器中的flex元素在交叉轴方向上居中
`align-items: stretch;`	设置flex容器中的flex元素在交叉轴方向上自动填充	需要去除高度设置才能生效
`flex-shrink: 0;`	设置flex容器中的flex元素不能被自动伸缩	默认为`1`
`flex-shrink: 1;`	设置flex容器中的flex元素可以被自动伸缩	默认为`1`
`flex: n`	设置flex容器中的flex元素的占位权重

注：flex布局使用以下两行排列方式使得flex元素整体居中

.box-item {
    /* flex布局下，设置以下两条语句，自动水平、垂直居中 */
    justify-content: center;
    align-items: center;
}

使用示例

<template>
	<view>
		<view class="box">
			<view class="box-item">1</view>
			<view class="box-item">2</view>
			<view class="box-item">3</view>
			<view class="box-item">4</view>
			<view class="box-item">5</view>
			<view class="box-item">6</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		width: 100%;
		height: 500upx;
		border: 1upx solid gray;
		
		display: flex;
		
		/* 设置flex布局的主轴为纵向（默认为横向） */
		/* flex-direction: column; */
		
		/* flex布局下，设置以下两条语句，自动水平、垂直居中 */
		/* justify-content: center; */
		/* align-items: center; */
		
		/*  自动换行 */
		/* flex-wrap: wrap; */
		/*  反向自动换行 */
		/* flex-wrap: wrap-reverse; */
		/* 水平（主轴）方向-居中 */
		/* justify-content: center; */
		/* 水平（主轴）方向-两端对齐 */
		/* justify-content: space-between; */
		/* 水平（主轴）方向-挤到左边 */
		/* justify-content: flex-start; */
		/* 水平（主轴）方向-挤到右边 */
		/* justify-content: flex-end; */
		
		/* 垂直（交叉轴）方向-居中 */
		/* align-items: center; */
		/* 垂直（交叉轴）方向-填充(需要将设置的高度去除才能生效) */
		/* align-items: stretch; */
		/* 垂直（交叉轴）方向- */
		align-items: center;
		
		 
	}
	
	.box-item {
		color: #fff;
		height: 200upx;
		
		/* width: 200upx; */
		/* 平均分配宽度 */
		/* flex: 1; */
		
		line-height: 200upx;
		font-size: 30upx;
		font-weight: bold;
		
		display: flex;
		/* flex布局下，设置以下两条语句，自动水平、垂直居中 */
		justify-content: center;
		align-items: center;
	}
	
	.box-item:nth-of-type(odd) {
		background-color: #007AFF;
	}
	
	.box-item:nth-of-type(even) {
		background-color: #09BB07;
	}
	
/* 	.box-item:nth-of-type(1) {
		// 设置flex元素的压缩情况，默认值为1，代表可以被压缩；0代表不会被压缩
		flex-shrink: 0;
	} */
	
	/* 以下三个选择器设置了主轴上的权重，会根据比例分配大小 */
	.box-item:nth-of-type(1) {
		flex: 1;
	}
	
	.box-item:nth-of-type(2) {
		flex: 2;
		
		/* 将某个flex元素单独放到底部 */
		align-self: flex-end;
	}
	
	.box-item:nth-of-type(3) {
		flex: 3;
	}
	
</style>

【017】数据渲染

数据定义

数据需要定义在script脚本的data()中进行返回，以键值对的形式呈现（或者说就是json对象）。

<template>
	<view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "hahahaha",
				userinfo: {
					username: "emmm",
				}
			}
		},
	}
</script>

<style>
    
</style>

数据使用

数据在template中可以用双括号{{数据名}}引用相应的数据，如果数据是一个对象，可以用.来引用其中的数据。

<template>
	<view>
		<view class="box">
			<view class="box-item">测试一{{username}}</view>
			<view class="box-item">测试二{{userinfo.username}}</view>
			<view class="box-item">测试三</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "hahahaha",
				userinfo: {
					username: "emmm",
				}
			}
		},
	}
</script>

<style>
	.box {
		border: 1upx solid #333;
		height: 500upx;
		width: 100%;
		
		display: flex;
	}
	
	.box>view {
		background-color: #007AFF;
		border: 1upx solid #FFFFFF;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 40upx;
		flex: 1;
		height: 500upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

数据修改

可以在script脚本的methods里面定义函数，触发事件时动态调用。

在函数中通过this来使用data()中返回的数据。

<template>
	<view>
		<view class="box">
			<view class="box-item">测试一{{username}}</view>
			<view class="box-item">测试二{{userinfo.username}}</view>
			<view class="box-item">测试三</view>
		</view>
		<button type="default" @tap="changeUsername('LOL')">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "hahahaha",
				userinfo: {
					username: "emmm",
				}
			}
		},
		methods: {
			changeUsername:function(name){
				this.userinfo.username=name;
			}
		},
	}
</script>

<style>
	.box {
		border: 1upx solid #333;
		height: 500upx;
		width: 100%;
		
		display: flex;
	}
	
	.box>view {
		background-color: #007AFF;
		border: 1upx solid #FFFFFF;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 40upx;
		flex: 1;
		height: 500upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

另外一种比较实用的方式是，给组件的class属性动态绑定，当触发事件时修改class的值，从而达到动态修改样式的效果。

<template>
	<view>
		<view :class="class2">
			<view class="box-item">测试一{{username}}</view>
			<view class="box-item">测试二{{userinfo.username}}</view>
			<view class="box-item">测试三</view>
		</view>
		<button type="default" @tap="changeUsername('LOL')">修改名字</button>
		<button type="default" @tap="changeClassname()">修改样式</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class2: "box",
				username: "hahahaha",
				userinfo: {
					username: "emmm",
				}
			}
		},
		methods: {
			changeUsername:function(name){
				this.userinfo.username=name;
			},
			changeClassname:function(){
				this.class2="box2";
			}
		},
	}
</script>

<style>
	.box {
		border: 1upx solid #333;
		height: 500upx;
		width: 100%;
		
		display: flex;
	}
	
	.box>view {
		background-color: #007AFF;
		border: 1upx solid #FFFFFF;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 40upx;
		flex: 1;
		height: 500upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box2 {
		border: 1upx solid red;
		height: 500upx;
		width: 100%;
		
		display: flex;
	}
</style>

【018】class和style绑定

官方文档 https://uniapp.dcloud.io/use?id=class-与-style-绑定

直接引入

传统的形式，没有任何判断，直接将所有的样式进行引入。

以:class="['类名1', '类名2']"这样的形式添加。

<template>
	<view>
		<view class="box" :class="['bor', 'fs']">box</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bor {
		border: 10upx solid #007AFF;
	}
	
	.fs {
		font-size: 80upx;
	}
</style>

和变量动态绑定

用变量值来标识一些类名，方便以后动态进行修改。

以:class="[类名变量1, 类名变量2]"这样的形式添加。

<template>
	<view>
		<view class="box" :class="[class1, class2]">box</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class1: "bor",
				class2: "fs"
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bor {
		border: 10upx solid #007AFF;
	}
	
	.fs {
		font-size: 80upx;
	}
</style>

可以在其中使用三目运算符筛选类名。

以:class="[条件表达式?类名变量1:'', 条件表达式?类名变量2:类名变量3]"这样的形式添加。

<template>
	<view>
		<!-- 年龄大于10岁时，获得class1的边框样式，否则无 -->
		<!-- 性别为女时，获得class2的字体样式，否则无 -->
		<view class="box" :class="[age>10?class1:'', gender==`女`?class2:'']">box</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class1: "bor",
				class2: "fs",
				age: 11,
				gender: '女'
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bor {
		border: 10upx solid #007AFF;
	}
	
	.fs {
		font-size: 80upx;
		color: pink;
	}
</style>

也有比较简洁的写法，也可以用变量来声明true、false

以:class="{'类名':布尔变量}"这样的形式添加。

<template>
	<view>
		<!-- 变量isActive为真时，获得class1的边框样式，否则无 -->
		<!-- 变量isfs为真时，获得class2的字体样式，否则无 -->
		<view class="box" :class="{'bor':isActive, 'fs':isfs}">box</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class1: "bor",
				class2: "fs",
				age: 11,
				gender: '女',
				isActive: false,
				isfs: true
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bor {
		border: 10upx solid #007AFF;
	}
	
	.fs {
		font-size: 80upx;
		color: pink;
	}
</style>

style属性引入

可以通过style属性将样式引入，同样可以使用变量进行调节。

以:style="{'样式名1': '样式值1', '样式名1': 变量}"这样的形式添加。

<template>
	<view>
		<view class="box" :style="{'color': Color, 'font-size': Size+'px'}">box</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Color: "#333",
				Size: 50
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

【019】条件渲染

给标签加上v-if属性进行条件渲染，一般使用v-if="布尔变量"

<template>
	<view>
		<view class="box" v-if="isshow">box</view>
		<button type="default" @tap="changeShow()">隐藏</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true
			}
		},
		methods: {
			changeShow:function(){
				this.isshow=!this.isshow;
			}
		},
	}
</script>

<style>
	.box {
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

当然，也可以用条件表达式v-if="(条件表达式)"

<template>
	<view>
		<view class="box" v-if="(age>20)">{{age>30?'中年人':'年轻人'}}</view>
		<button type="default" @tap="changeAge()">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true,
				age: 10
			}
		},
		methods: {
			changeShow:function(){
				this.isshow=!this.isshow;
			},
			changeAge:function(){
				this.age+=11;
			},
		},
	}
</script>

<style>
	.box {
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

但是上面这些直接在view组件上添加v-if属性的方式，官方是不推荐的。

类似的方式还有v-show属性。

<template>
	<view>
		<view class="box" v-show="(age>20)">{{age>30?'中年人':'年轻人'}}</view>
		<button type="default" @tap="changeAge()">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true,
				age: 10
			}
		},
		methods: {
			changeShow:function(){
				this.isshow=!this.isshow;
			},
			changeAge:function(){
				this.age+=11;
			},
		},
	}
</script>

<style>
	.box {
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

v-if和v-show最大的区别在于：v-if不会渲染出来，而v-show会对渲染出来的元素设置display: none;样式

比较好的写法应该是在template组件中联合使用v-if、v-else-if和v-else这些属性。

<<template>
	<view>
		<view>
			<template v-if="isshow">
				<view class="box1">box1</view>
			</template>
			<template v-else-if="isshow2">
				<view class="box2">box2</view>
			</template>
			<template v-else>
				<view class="box3">box3</view>
			</template>
			<button type="default" @tap="changeShow()">隐藏</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true,
				isshow2: true
			}
		},
		methods: {
			changeShow:function(){
				this.isshow=!this.isshow;
				this.isshow2= !this.isshow && !this.isshow2;
			},
			changeAge:function(){
				this.age+=11;
			},
		},
	}
</script>

<style>
	.box1 {
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box2 {
		background-color: #09BB07;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box3 {
		background-color: #8A6DE9;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

【020】列表渲染

官方文档 https://uniapp.dcloud.io/use?id=列表渲染

一般形式

形如

<view class="font" v-for="(val,index) in 列表变量" :key="index">
    <!-- 类似{{index}} - {{val}}这样的 --> 
</view>

遍历一维数组

读取列表中变量

<template>
	<view>
		<!-- 循环一维数组 -->
		<view class="font" v-for="(val,index) in list1" :key="index">
			{{index}} - {{val}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: ["篮球", "足球", "羽毛球"]
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

读取列表中对象

<template>
	<view>
		<!-- 循环一维数组 -->
		<view class="font" v-for="(val,index) in list2" :key="index">
			{{index}} - {{val.name}} - {{val.id}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list2: [
					{ name: "篮球", id: "lanqiu"},
					{ name: "足球", id: "zuqiu" },
					{ name: "羽毛球", id: "yumaoqiu" }
				]
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

遍历二维数组

<template>
	<view>
		<!-- 循环二维数组 -->
		<view class="font" v-for="(val1,index1) in list3" :key="index1">
			<view class="font">{{val1.name}}</view>
			<view class="font" v-for="(val2,index2) in val1.list" :key="index2">
				{{index2}} - {{val2}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list3: [
					{
						name: "广东",
						list: ["广州", "深圳", "佛山"]
					},
					{
						name: "四川",
						list: ["不知道1", "不知道2"]
					}
				]
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

遍历对象

<template>
	<view>
		<!-- 循环对象 -->
		<view class="font" v-for="(val,key) in objlist" :key="key">
			{{key}} - {{val}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				objlist: {
					name1: "篮球",
					name2: "足球",
					name3: "羽毛球"
				}
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

注：条件渲染建议使用template组件，列表渲染建议使用block组件

<template>
	<view>
		<!-- 循环对象 -->
		<block v-for="(val,key) in objlist" :key="key">
			<view class="font">
				{{key}} - {{val}}
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				objlist: {
					name1: "篮球",
					name2: "足球",
					name3: "羽毛球"
				}
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

【021】事件处理器

官方文档 https://uniapp.dcloud.io/use?id=事件处理器

点击事件处理

通过@tap属性绑定触发点击后的事件处理。

另外，可以用在事件处理中使用console.log()打印出一些信息，便于进行调试。

<template>
	<view>
		<view class="font">{{name}}</view>
		<view class="box" @tap="clickevent()">按钮</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "哈哈哈"
			}
		},
		methods: {
			clickevent:function(){
				console.log(this.name);
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 80%;
		height: 80upx;
		margin: 0 auto;
		font-size: 50upx;
		border-radius: 30upx;
		border: 1upx, solid, red;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.font {
		font-size: 50upx;
	}
</style>

阻止事件冒泡

像是下面这样的代码，就会出现“点击了里面的时候，同时也点中了外面”这样的情况。这就是所谓的“冒泡”，从里面冒泡到外面。

<template>
	<view>
		<view class="box1" @tap="box1event()">
			外面
			<view class="box2" @tap="box2event()">里面</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			box1event:function(){
				console.log("点击了外面");
			},
			box2event:function(){
				console.log("点击了里面");
			}
		},
	}
</script>

<style>
	.box1 {
		width: 100%;
		height: 500upx;
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 40upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box2 {
		width: 300upx;
		height: 300upx;
		background-color: #09BB07;
		color: #FFFFFF;
		font-size: 40upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

要想阻止事件冒泡也很简单，只需要将@tap属性改成@tap.stop就可以阻止其默认行为。

<template>
	<view>
		<view class="box1" @tap.stop="box1event()">
			外面
			<view class="box2" @tap.stop="box2event()">里面</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			box1event:function(){
				console.log("点击了外面");
			},
			box2event:function(){
				console.log("点击了里面");
			}
		},
	}
</script>

<style>
	.box1 {
		width: 100%;
		height: 500upx;
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 40upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box2 {
		width: 300upx;
		height: 300upx;
		background-color: #09BB07;
		color: #FFFFFF;
		font-size: 40upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

【022】监听属性

监听属性需要在script脚本的watch中定义属性变化后处理的函数。当被监听的属性发生变化后，将自动调用处理的函数。

<template>
	<view>
		<view class="font">{{num}}</view>
		<view class="font">{{num>10?'优秀':''}}</view>
		<button type="primary" @tap="change()">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0
			}
		},
		methods: {
			change:function(){
				this.num++;
			}
		},
		// 用watch监听属性
		watch: {
			num:function(val){
				console.log(val);
			}
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

【023】计算属性

官方文档 https://uniapp.dcloud.io/use?id=计算属性

比如下面的例子，体重的显示需要根据不同大小设置不同的显示单位

<template>
	<view>
		<view class="font">
			{{ (weight>1000) ? (weight/1000+'kg'): (weight+'g')}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weight: 900  // 体重
			}
		},
		methods: {
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

但是把这些计算放到页面上是不太好的，不方便去维护。

计算属性需要在script脚本的computed中定义，有点像script脚本的method里面的函数，但是计算结果过需要return回去。

计算属性的调用和data的调用差不多，在{{}}被使用，但是不需要加上小括号()。

<template>
	<view>
		<view class="font">
			{{ ZHweight }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weight: 1900  // 体重
			}
		},
		computed: {
			ZHweight:function(){
				return (this.weight>1000) ? (this.weight/1000+'kg') : (this.weight+'g');
			}
		},
		methods: {
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>