好资源导航 » 文章资讯 » Vue v-bind动态绑定class实例方法

Vue v-bind动态绑定class实例方法

2023-08-03 02:28:04 79

现在很多网站，都是希望动态切换class，更换css样式。下面我们使用Vue的v-bind绑定class

v-bind动态绑定class

对象语法绑定（常用）

red和size的值为true就在class显示red和size，false就不显示。下面有两种写法：






{{list}}

{{list}}


反选

注意：v-bind:class指令可以与普通的class特性共存；对应的语法糖：“:class”等于v-bind:class

数组语法绑定

数组语法不常用，主要是它不灵活：




{{list}}

constapp=newVue({ el:"#app", data:{ list:"Vue", acli:"aaa", bcli:"bbb", }, })

字符串绑定更数组语法绑定差不多，不常用

letvm=newVue({ el:"#demo", data:{ classA:"string" } })

综合的写法

varvm=newVue({ el:"#demo", data:{ one:"string", classa:true, classb:false } })

v-bind动态绑定style

对象语法绑定（常用）

v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。




{{list}}

{{list}}

constapp=newVue({ el:"#app", data:{ list:"Vue", color:"red", size:50 }, })

注：对象语法的value（属性值），如果加上单引号就原样输出，不加就输出data的变量值

数组语法绑定

v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：

{{list}}

constapp=newVue({
el:"#app",
data:{
list:"Vue",
baseStyles:{fontSize:"50px",color:"red"},
overridingStyles:{"margin-top":"50px"}
},

})

以上就是本次介绍的全部相关知识点，感谢大家的学习和对毛票票的支持。