数据绑定的一个常见需求场景是操纵元素的 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>