uniapp的相关知识（1）

Vae_Mars2024-10-15 15:42

1、hover-class：当有鼠标按下时，会切换对应的样式；也可以设置对应的变色时间。

2、selectable：设置text组件的文本是否可以进行复制。

3、with：当设置为80%时，表示宽占整个屏幕的80%。

4、border：1px solid red；表示一个为红色的边框。

5、navigator：跳转到某个页面，可以内嵌到文字和图片中。下面是示例：

javascript 复制代码

<view>
    <navigator url="/pages/my/my">跳转到我的界面</navigator>
</view>

6、{{ a }}：如果设置a=5则输出5不输出a。此为插值表达式，可以输入逻辑判断，下面是示例：

javascript 复制代码

<view>{{1<2 ? "123":"456"}}</view>
//此时是输出456

7、ref：可以使用数据驱动，更新对应的值，num1的值不更新，num2的值会每秒+1，下面是示例：

javascript 复制代码

<template>
  <view>{{num1}}</view>
  <view>{{num2}}</view>
</template>

<script setup>
import { ref } from "vue";

let num1 = 6;
setInterval(() => {
   num1++;
   console.log(num1);
 }, 1000);

let num2 = ref(10);
setInterval(() => {
  num2.value++;
  console.log(num2.value);
}, 1000);
</script>

8、取余：在进行重置循环的时候可以通过取余来设计，下面是示例：

javascript 复制代码

<script setup>
import{ref}from"vue";
const arrs=ref([
    "../../static/pic1.png"
    "../../static/pic2.png"
    "./../static/pic3.webp"
    "./../static/pic.jpg"
]);
const picurl =ref("../../static/pic1.png")
leti=0;
setInterval((）=>{
    i++;
    console.log(i);
    picurl.value=arrs.value[i%4]
.1000)