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

• v-bind指令配合图片轮播–class和style内联绑定
  这是在vue中的指令方式，在attribute 中需要用到这个，简写的话就是直接冒号，例如： :class,这里有个区别，组件加上class，是给当前组件定义名称，如果在class前加上冒号，这就是在使用attribute了

<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，属于一个联动的效果。这里自己在多添加了一层，在写一个开关，由第二个开关决定第一个开关的打开关闭，类似一个多开关控制灯的效果。

<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中有详细解说

<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>