uniapp学习日志三

时风

已于 2024-05-05 01:28:02 修改

阅读量623

点赞数 13

文章标签： uni-app 学习 javascript

于 2024-05-05 01:27:47 首次发布

本文链接：https://blog.csdn.net/2302_77915576/article/details/138429081

版权

本文详细介绍了Vue.js的基本语法，包括数据绑定、模板中的循环结构、按钮点击事件以及生成随机颜色的功能。涵盖了Vue的常用指令和组件交互的实例。

摘要由CSDN通过智能技术生成

一、vue语句基本语法

运行代码：

运行方式及其作用查看注释

<template>
	<view>
		<view class="box" >当前标题：{{title}}</view><!-- 双括号可以实现变量替代 -->
			<view >数字：{{number}}</view><!-- 双括号可以实现变量替代 -->
			<view >{{arr}}</view><!-- 显示数组 -->
			<view >{{arr[2]}}</view><!-- 显示数组中的一个值 -->
		    <view >{{obj.name}}</view><!--显示物体中关键字代表的值-->
			
			<view v-if="day==1">周一</view><!--根据真假进行显示,if-else-->
		    <view v-else-if="day==2">周二</view>
			  <view v-else-if="day==3">周三</view>
			    <view v-else-if="day==4">周四</view>
				  <view v-else-if="day==5">周五</view>
				    <view v-else-if="day==6">周六</view>
					  <view v-else-if="day==7">周日</view>
			<view v-else>格式错误</view>
				
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"牢鸟",
				number:114514,
				arr:["aaa","bbb","ccc",1,2,3],
				obj:{name:"张三",age:22},
				state:true,
				day:7,
			};
		}
	}
</script>

<style lang="scss">

</style>

运行截图：

二、循环显示数据

两种循环方式：

<view v-for="item in arr">{{item}}</view><!--循环每一个arr里的值 -->

	<view v-for="item in arr" class="out">
				<view class="row">{{item}}</view>

对循环数据进行排序：

	<view v-for="(item,index) in arr" class="out">
				<view class="row">{{index+"-"+item}}</view>

三、点击触发

运行代码：

运行结果：点击知更鸟文字显示另一个文字

<template>
	<view>
		<view v-on:click="onClick">{{title}}</view><!-- 点击事件进行跳转 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"知更鸟"		
			};
		},
		methods:{
			onClick:function(){
				this.title="原神启动！"
			}
		}
	}
</script>

<style lang="scss">

</style>

三、按键事件触发

运行代码：

运行结果，按下按键数值加1

<template>
	<view>
		<view v-on:click="onClick">{{title}}</view><!-- 点击事件进行跳转 -->
		<button @click="clicknum">定时器：{{num}}min</button><!-- v-on简写@ -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"知更鸟",		
				num:1
			};
		},
		methods:{
			onClick:function(){
				this.title="原神启动！"
			},
			clicknum(){
				this.num++
			}
		}
	}
</script>

<style lang="scss">

</style>

四、点击色块产生随机色和随机

运行代码：

产生效果，点击色块能产生一个三位数的随机数和一个随机色（16进制，色彩偏暗）

<template>
	<view>
		<view v-on:click="onClick">{{title}}</view><!-- 点击事件进行跳转 -->
		<button @click="clicknum">定时器：{{num}}min</button><!-- v-on简写@ -->
		
		<!-- <view class="box" style="background-color: aqua;"></style></view> -->
		<view class="box" :style="{background:bgcolor}"@click="clickbg">{{random}}</view>
		
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"知更鸟",		
				num:1,
				bgcolor:"red",
				random:0
			};
		},
		methods:{
			onClick:function(){
				this.title="原神启动！"
			},
			clicknum(){
				this.num++
			},
			clickbg(){
				let color= "#"+String(Math.random()).substr(3,6);//获取随机数，从第三位开始获取，取6位
				//console.log(color)
				//this.bgcolor="#c0c"
				this.bgcolor=color
				
				let  random =String(Math.random()).substr(3,3)
				this.random=random
			}
		}
	}
</script>

<style lang="scss">
.box{
      width: 100rpx;
	  height: 100rpx;
	  background: pink;
}
</style>