当前位置：首页 > news >正文

class类和style内联样式的绑定

news 来源：原创 2024/7/9 5:21:20

这里的绑定其实就是v-bind的绑定，如代码所示，div后面的引号就是v-bind绑定，然后大括号将整个对象括起来，对象内先是属性，属性后接的是变量，这个变量是定义在script中的，后通过这个变量，来控制属性，实现绑定。
在这里插入图片描述
先设置个盒子，并为其设置style样式，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box"></view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)const Size = ref(30) ;let i = 0 ;  //这个值不在模板层渲染，可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.value = arrs.value[i%4] ;},1000)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;
}
.active{background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

效果如下：
在这里插入图片描述
再添加一个类名，为其设置样式，也就是说，用两个类名作用于同一个盒子。继续在盒子中添加文字，设置字体大小，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box active">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)const Size = ref(30) ;let i = 0 ;  //这个值不在模板层渲染，可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.value = arrs.value[i%4] ;},1000)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

效果如下：
在这里插入图片描述
如图所示，现在实现了两个类名共同作用于一个类名，且在两个类名定义相同属性的情况下，下方的样式会优先作用于类。

现在，尝试把active变成动态的值，先删掉之前定义的active，现在用v-bind形式定义active，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box" :class = "'active'">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)const Size = ref(30) ;let i = 0 ;  //这个值不在模板层渲染，可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.value = arrs.value[i%4] ;},1000)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

这里的显示效果和刚刚的效果相同。这里请注意定义active时的格式，尤其是在使用动态绑定，要加上一个单引号，以表示它是字符串类型的类名，否则没法作用上的。

接下来，尝试用一个值来控制active，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box" :class = "{active:true}">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)const Size = ref(30) ;let i = 0 ;  //这个值不在模板层渲染，可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.value = arrs.value[i%4] ;},1000)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

如开头所说的，这里用大括号将整个对象括起来，对象内包含了属性active，属性后接的是变量，可以写上true或者false，以控制active，这里我们用的是true，效果如下：
在这里插入图片描述

还可以将这个变量定义在script中，后通过这个变量，来控制属性，实现绑定，这里我们定义变量为false，记住一定要用ref来定义，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box" :class = "{active:isactive}">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

效果如下：
在这里插入图片描述
这是一种方法，日常使用中，还可以使用三元表达式来控制active，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box" :class = "true?'active' : ' ' ">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

当然，三元表达式的判断条件也可以填入刚刚设置的isactive变量。
接下来，把变量放入定时器，让其动态改变，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box" :class = "{active:isactive}">v-bind指令</view><view calss="box" :class = "isactive?'active':'box'"></view>
</template><script setup>import { ref } from 'vue';setInterval(()=>{isactive.value = !isactive.value},1000)const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

成功：

在这里插入图片描述
以上两种都是常用的方式，接下来演示一下内联的样式，先写个简单的内联样式，设置第二个box的宽度，要注意的是，内联样式的权重更高，会覆盖其他样式，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box" :class = "{active:isactive}">v-bind指令</view><!-- <view calss="box" :class = "isactive?'active':'box'"></view> --><view class="box" style = "width: 300px;">内联样式</view>
</template><script setup>import { ref } from 'vue';setInterval(()=>{isactive.value = !isactive.value},1000)const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

效果如下：
在这里插入图片描述
如果要使用变量，就需要在style的前面加上冒号，并以对象的形式定义，刚刚定义了宽度，要用单引号括起来，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box" :class = "{active:isactive}">v-bind指令</view><!-- <view calss="box" :class = "isactive?'active':'box'"></view> --><view class="box" :style = "{width:'300px'}">内联样式</view>
</template><script setup>import { ref } from 'vue';setInterval(()=>{isactive.value = !isactive.value},1000)const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

或者用数字+‘单位’(例：260 + ‘px’ )这样的形式写出，也是可以的。

通过内联，也可以实现动态变量，将字体大小定义为数字 + ‘单位’的形式，然后用变量替换掉数字，并将其放入定时器中，代码如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按钮！</button><view class="box" :class = "{active:isactive}">v-bind指令</view><!-- <view calss="box" :class = "isactive?'active':'box'"></view> --><view class="box" :style = "{width:'300px',height:260 + 'px',fontSize:fontsize + 'px'}">内联样式</view>
</template><script setup>import { ref } from 'vue';let i = 0 ;let fontsize = ref(30) ;setInterval(()=>{isactive.value = !isactive.valuei ++ ; fontsize.value += i ;},1000)const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green;  //下面的CSS可以覆盖上面的color: white;
}
</style>

效果如下：
在这里插入图片描述