vue3.0 class类和style内联样式的绑定

最新推荐文章于 2024-08-20 21:14:58 发布

上尽重城更上楼

最新推荐文章于 2024-08-20 21:14:58 发布

阅读量80

点赞数 3

文章标签： json css html5 javascript

本文链接：https://blog.csdn.net/hfz1997/article/details/140956785

版权

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