class与style绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

两个样式控制时如果有重复的样式，后一个会把前面的样式覆盖

：class是v-bind:class的缩写

我们可以传递一个对象来切换class，const isBox=ref(false)时box样式不会生效，为true时生效

 行内样式比行外样式级别高，所以会覆盖

 

 :style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性：

直接写style“{}”里面的东西是不会有效的，要在style前面加上“：”冒号，width:300px中的300px要使用单引号括起来，如果只有数字，没有px之类的单位的话就不用使用单引号括起来

<view  :style="{width:'300px',height:260}">内联样式</view>

我们也可以把数字和单位分开放比如：{width:'200px',height:260+'px'}，注意不能使用双引号括起否则会报错

 也可以把height的属性值变成一个变量，然后每一秒增加1px像素,赋值时使用变量的value进行赋值

<template>
	<view  class="box" :style="{width:'300px',height:size+'px'}">内联样式</view>
</template>

<script setup>
import { ref } from 'vue';
	
	const size=ref(300)
	const isBox=ref(true);
	var i=0;/* 默认为0 */
	setInterval(()=>{
		i++;/* 一秒加一次 */
		size.value+=i
	},1000)
</script>