vue动态绑定类（vue 动态样式绑定 class/style）

时间2025-05-03 17:37:18分类IT科技浏览3943

导读： 简介：...

简介：

字符串写法：类名不确定，要动态获取

对象写法：要绑定多个样式，个数确定，名字确定，但不确定用不用。

数组写法：要绑定多个样式，个数不确定，名字不确定。

style方法（键值要用小驼峰命名法）

简介：

绑定样式：

1 、class样式

写法：class="xxx" xxx可以是字符串，对象，数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数确定，名字确定，但不确定用不用。

数组写法适用于：要绑定多个样式，个数不确定，名字不确定。

2 、style样式

：style="{fonSize : xxx}"其中xxx是动态值，键值要用小驼峰命名法。

：style="[a,b]"其中a，b是样式对象。

class样式：

字符串写法：类名不确定，要动态获取

通过v-bind动态绑定样式：

//样式----------------------------------------- <style> .basic{ border: 5px solid rgb(77, 191, 252); //边框 width: 400px; //宽 height: 100px; //高 } .style1{ border: 5px solid rgb(75, 139, 235); //边框 background-color: rgb(20, 117, 122); //背景颜色 color: bisque; //字体颜色 } .style2{ border: 5px solid rgb(182, 219, 131); //边框 background-color: rgb(222, 171, 203); //背景 color: rgb(16, 23, 29); //字体 border-radius: 10px; //圆角 } .change1{ background: -webkit-linear-gradient(left,rgb(182, 219, 131),rgb(241, 137, 201)); //渐变背景 } .change2{ font-size: larger; //大号字体 border-radius: 30px; //圆角 } </style> <div id="gjs"> <h1>字符串方法</h1> <div class="basic" :class="style"> {{name}} <br> <button @click="changeStyle">改变样式</button> </div> <hr> <h1>对象方法</h1> <div class="basic" :class="styleObj"> {{name}} <br> <button @click="changeStyle1">改变样式</button> </div> <hr> <h1>数组方法</h1> <div class="basic" :class="styleArr"> {{name}} <br> <button @click="changeStyle2">减少样式</button> <button @click="changeStyle3">增加样式</button> </div> <h1>style方法1</h1> <div class="basic" :style="{fontSize : fsize+px}"> {{name}} </div> <h1>style方法2</h1> <div class="basic" :style="fontSize"> {{name}} </div> </div> <body> //v-bind简写：将样式style1绑定到div :class="style"------------------------------------------- <div id="gjs" class="basic" :class="style">{{name}}</div> <script> const vm = new Vue({ el: #gjs, data:{ name: 搞技术, //定义类名-可以通过绑定事件更改为其他类名更改样式----------------------------------- style: style1, }, }) </script> </body>

也可以添加按钮绑定点击事件改变参数，点击按钮将style的参数变为style2，通过添加判断实现来回改变样式

const vm = new Vue({ el: #gjs, data:{ name: 搞技术, style: , }, methods: { changeStyle(){ if (this.style == style2) { this.style = style1 } else { this.style = style2 } }}

对象写法：要绑定多个样式，个数确定，名字确定，但不确定用不用。

通过点击按钮或者控制台修改对象属性的值来控制样式的变化

数组写法：要绑定多个样式，个数不确定，名字不确定。

通过绑定事件对数组中的值进行修改，点击减少则移除数组中的值，点击添加则给数组中添加值来控制样式的变化

所以背景颜色消失

style方法（键值要用小驼峰命名法）

// <h1>style方法1</h1> <div class="basic" :style="{fontSize : fsize+px}"> //这里的fontSize小驼峰 {{name}} </div> <h1>style方法2</h1> <div class="basic" :style="fontSize"> {{name}} </div> <script> const vm = new Vue({ el: #gjs, data:{ name: 搞技术, fsize:40, //方法1 fontSize:{ fontSize:40px, }, //方法2这里的fontSize小驼峰 } }) </script>

vue动态绑定类（vue 动态样式绑定 class/style）

简介：

字符串写法：类名不确定            ，要动态获取

style方法 （键值要用小驼峰命名法）

字符串写法：类名不确定，要动态获取

style方法（键值要用小驼峰命名法）