Vue绑定class

缺乏、安全感 2022-06-06 06:43 320阅读 0赞

Vue绑定时可以通过传入一个对象,来动态的切换class:

这行代码的意思就是,actie这个class是否存在,取决于属性isActive。

对象中也可以传入多个属性:

data () {
return {

isActive:true,

error:false

}

}

渲染结果:

虽然官网中还有数组语法,但说实话我做项目基本没有用到过,这里还是说下我在做项目使用的动态切换class的一种情况。



{ {size}}

这里的 active 是我添加的类名,activeName 是事件selected 选中的值,意思是,如果选中的值存在于数据里面, 也就是选中当前这条数据,就给当前这条

数据的DOM添加类名。可以动态的切换class。

CenterCenter 1

发表评论

表情:
评论列表 (有 0 条评论,320人围观)

还没有评论,来说两句吧...

相关阅读

    相关 vue 随机class

    在 Vue 中,你可以使用动态绑定 class 的语法来为元素随机绑定 class。 首先,你需要定义一个变量来存储你想要绑定的 class 的名称。然后,你可以使用这个变量

    相关 vue动态class

    Vue.js 允许您使用 v-bind 指令或简写的 : 来动态绑定 class 属性。这允许您基于某些条件为元素添加或删除类名,从而实现动态样式控制。以下是一些示例: 动态

    相关 vue系列】class动态

    > 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串