vue 动态样式绑定 class/style的写法小结
更新时间：2023年03月04日 10:27:59 作者：想搞技术
这篇文章主要介绍了vue 动态样式绑定 class/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'
}
}}对象写法：要绑定多个样式，个数确定，名字确定，但不确定用不用。
通过点击按钮或者控制台修改对象属性的值来控制样式的变化
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技术',
styleObj:{
change1:false,
change2:false,
}
},
methods: {
changeStyle1(){
if (this.styleObj.change1 == true) {
this.styleObj.change1 = false
this.styleObj.change2 = false
} else {
this.styleObj.change1 = true
this.styleObj.change2 = true
}
}
})
</script>数组写法：要绑定多个样式，个数不确定，名字不确定。
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技术',
styleArr:['change1','change2'],
},
methods: {
changeStyle2(){
this.styleArr.shift()
},
changeStyle3(){
this.styleArr.unshift('change1')
}
}
})
</script>通过绑定事件对数组中的值进行修改，点击减少则移除数组中的值，点击添加则给数组中添加值来控制样式的变化
所以背景颜色消失
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 动态样式绑定 class/style的写法小结的文章就介绍到这了,更多相关vue 动态样式绑定 class和style内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在现代 Web 应用中,Tab 页签功能是非常常见的一种交互模式,它可以帮助用户在不同的视图间快速切换,而不会丢失当前视图的状态,本文将介绍如何在 Vue 项目中实现一个带有缓存功能的 Tab 页签功能,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了Vue使用正则校验文本框为正整数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
这篇文章主要介绍了VUE异步更新DOM - 用$nextTick解决DOM视图的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文主要介绍了vue3实现多层级列表的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
Element-UI 多个el-upload组件自定义上传不用上传url并且携带自定义传参(文件序号)
有多个upload组件,每个都需要单独上传获取文件（JS File类型）,不需要action上传到指定url,自定义上传动作和http操作,下面通过本文给大家分享Element-UI 多个el-upload组件自定义上传不用上传url并且携带自定义传参(文件序号),感兴趣的朋友一起看看吧2024-06-06
传统的表单开发通常需要编写大量的重复代码,例如处理用户输入、验证数据、更新 UI 等等,为了简化开发,我们可以借助 Vue 3 的新特性,例如组合式 API 和 ref 对象,所以本文我们将一起学习如何使用 Vue 3 的新特性构建一个更加灵活、可扩展的动态表单2024-06-06
这篇文章主要为大家详细介绍了vue实现记事本功能，记事本可以进行添加删除事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
在Vue项目中,通过使用vue-print-nb插件,可以实现页面的打印功能,这篇文章主要介绍了vue项目纯前端实现的模板打印功能的相关资料,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue.js动态修改background-image问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在开发webapp的时候总是会受到首屏加载时间过长的影响，越来越多的APP采用了“骨架屏”的方式去提升用户体验。这篇文章主要介绍了Vue页面骨架屏的实现方法,感兴趣的小伙伴们可以参考一下2018-05-05
最新评论