学习Uni-app开发小程序Day5

今天根据老师视频学习了几个vue的功能

  • v-bind指令配合图片轮播--class和style内联绑定
    这是在vue中的指令方式,在attribute 中需要用到这个,简写的话就是直接冒号,例如: :class,这里有个区别,组件加上class,是给当前组件定义名称,如果在class前加上冒号,这就是在使用attribute了
html 复制代码
<template>
	<view>
		<image :src="pic" mode="widthFix" class="pic4"></image>
		<!-- 这里记录下,在button中,添加的loading的时候,只要加上,就显示转圈, -->
		<!-- 这里需要再loading前面加上冒号,这就可以控制是否让显示按钮前面的转圈 -->
		<button type="primary" :loading="isActive ? true : false">按钮</button>
	</view>
	<view class="box" :class="{activie:isActive}">v-bind指令</view>
	<view class="box" :class="isActive ? 'activie' : '' ">v-bind指令2</view>
	<view class="box" :style="{width: '300px',height:260+'px',fontSize:size+'px'}">内联样式</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const arry = ref([
		"../../static/pic1.png",
		"../../static/pic2.png",
		"../../static/pic3.webp",
		"../../static/pic4.jpg"
	])
	const pic = ref("../../static/pic1.png")
	let isActive = ref(false);
	const size = ref(30);
	let i = 0;
	setInterval(() => {
		i++;
		// size.value+=i;
		pic.value = arry.value[i % 4]
		isActive.value = !isActive.value;
	}, 5000)
</script>

<style lang="scss" scoped>
	.pic4 {
		width: 100vw;
		height: 200px;
	}
	.box {
		width: 200px;
		height: 200px;
		background: red;
		font-size: 20px;
		margin: 5px;    //这是当前组件距离边框的距离
		padding: 10px;  //这是文字的边距
	}
	.activie {
		background: yellow;
		color: #0055ff;
	}
</style>
  • 事件监听
    这里是事件的监听,添加一个view,通过事件监听,更改view的背景颜色等(这里控制背景颜色,使用的是随机数,然后截取随机数的6位,作为16进制的颜色码)。还添加了switch,这是一个开关组件,通过事件,监听开关来打开button的loading,属于一个联动的效果。这里自己在多添加了一层,在写一个开关,由第二个开关决定第一个开关的打开关闭,类似一个多开关控制灯的效果。
html 复制代码
<template>
	<view class="box" @click="onChick" :style="{background:colo}">
		{{num}}
	</view>
	<switch :checked="isChecked" @change="onchange"/>
	<button type="primary" :loading="isChecked">按钮</button>
	<switch checked="true" @change="onChange" />   
	 <!-- 这是根据属性,将在script中,得到event,然后可以获取组件的状态  -->
</template>

<script setup>
	import { ref } from 'vue';
	const num=ref(0);
	const colo=ref("#00aaff")
	const isLoading=ref(false);
	const isChecked=ref(true);
	function onChick(){
		num.value++
		colo.value="#"+String(Math.random()).substr(3,6);
		console.log(Math.random());
		console.log(String(Math.random()).substr(3,6));
	}
	function onchange(e){
		isLoading.value=e.detail.value;
		console.log(1+"/"+e.detail.value);
	}
	function onChange(e){
		isChecked.value=e.detail.value;
		console.log(2+"/"+e.detail.value);
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100px;
	height: 100px;
}
</style>
  • if条件渲染
    这里是使用if-else进行条件渲染,在v-if后面,可以是v-else-if,也可以是
    v-else,下买写了一个根据当前日期显示今天是礼拜几的功能,通过js中的new Data().getDay(),可以获取当前是礼拜几,根据国际值,0:是星期天,
    这里着重说下等等和等等等的区别,在下列text中有详细解说
html 复制代码
<template>
	<view>
		<view v-if="vIf">京东</view>
		<view v-else>淘宝</view>
		<view v-if="week===1">星期一</view>
		<view v-else-if="week===2">星期二</view>
		<view v-else-if="week===3">星期三</view>
		<view v-else-if="week==4">星期四</view>
		<view v-else-if="week==5">星期五</view>
		<view v-else-if="week==6">星期六</view>
		<view v-else-if="week==0">星期日</view>
		-------------
		<text>
			\n 在uniapp中,== 和 === 是两个不同的运算符,它们在比较时有所不同:\n
			== 是相等运算符,它在比较时会进行类型转换(强制类型转换),如果两个值相等则返回 true,否则返回 false。\n
			=== 是严格相等运算符,它在比较时不会进行类型转换,如果两个值的类型不同,则直接返回 false;只有当两个值的类型相同时,				   它才会比较值本身是否相等。
		</text>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const vIf = ref(false)
	let week=new Date().getDay();  //这是获取当前是星期几的代码
</script>

<style lang="scss" scoped>

</style>
相关推荐
HerayChen2 分钟前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
风尚云网20 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
EterNity_TiMe_2 小时前
【论文复现】(CLIP)文本也能和图像配对
python·学习·算法·性能优化·数据分析·clip
sanguine__2 小时前
java学习-集合
学习
lxlyhwl2 小时前
【STK学习】part2-星座-目标可见性与覆盖性分析
学习
nbsaas-boot2 小时前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
学习·chatgpt·编辑器
CV学术叫叫兽3 小时前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年3 小时前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
一棵开花的树,枝芽无限靠近你3 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
VertexGeek3 小时前
Rust学习(八):异常处理和宏编程:
学习·算法·rust