<template>
<view>
<image :src="picur1" mode=""></image>
<button type="primary" :loading="false" :disabled="false">按钮</button>
</view>
<view class="box" :class="{active:isActive}">
v-bind指令
</view>
<!-- <view class="box" :class="isActive ?'active':''"></view> -->
<view class="box" :style="{width:'300px',height:200+'px',fontSize:size+'px'}">内联样式</view>
</template>
<script setup>
import { ref } from 'vue';
const isActive = ref(true);
const picur1 = ref("../../static/pic1.jpg");
const size = ref(30);
const arrs = ref([
"../../static/pic1.jpg",
"../../static/pic2.jpg",
"../../static/pic3.jpg",
"../../static/pic4.jpg"
]);
let i = 0;
setInterval(()=>{
i++;
size.value+=i;
// picur1.value = arrs.value[i%4];//如果不取余数,那么arrs【3】以后就显示空白
isActive.value = !isActive.value
},1000)
</script>
<style lang="scss">
.box{
width: 200px;
height: 200px;
background-color: orange;
font-size: 20px;
}
.active{
background-color: green;
color: #fff;
}
</style>
vue3.0 class类和style内联样式的绑定
最新推荐文章于 2024-08-20 21:14:58 发布