Vue 绑定style和class样式的写法

 更新时间:2023年10月17日 09:41:46   作者:小吴吴吴呀  
class 与 style 绑定就是专门用来实现动态样式效果的技术,如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定,本文给大家讲解Vue 绑定style和class样式,感兴趣的朋友一起看看吧

在应用界面中,某些元素的样式是动态的。class 与 style 绑定就是专门用来实现动态样式效果的技术。

如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定。

 绑定 class 样式【字符串写法】

适用于:类名不确定,需要动态指定。

.box{
	width: 100px;
	height: 100px;
}
.aqua{
	background-color: aqua;
}
.red{
	background-color: red;
}
<div id="APP">
	<div class="box" :class="back" @click="toggleBack">点击变成红色</div>
</div>

注:第二个 class 使用的是 v-bind 简写的方式, :class=" " 。

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			back:"aqua"
		}
	},
	methods:{
		toggleBack(){
			this.back = "red";
		}
	}
});

点击前:

点击后:

 绑定 class 样式【数组写法】:

适用于:要绑定多个样式,个数不确定,名字也不确定。

.box{
	width: 100px;
	height: 100px;
}
.aqua{
	background-color: aqua;
}
.border{
	border: 20px solid red;
}
.radius{
	border-radius: 25px;
}
<div id="APP">
	<div class="box" :class="classArr">多个class样式</div>
</div>
const vm = new Vue({
	el: "#APP",
	data(){
		return {
			classArr:["aqua","border","radius"]
		}
	}
});

如果要绑定多个样式,个数确定,但是名字不确定,也可以使用以下写法: 

<div id="APP">
	<div class="box" :class="[a,b,c]">多个class样式</div>
</div>
const vm = new Vue({
	el: "#APP",
	data(){
		return {
			a: "aqua",
			b: "border",
			c: "radius"
		}
	}
});

注:效果与上边的示例相同,a、b、c 都是变量,控制是否使用某个 class 样式。

到此这篇关于Vue 绑定style和class样式的方式的文章就介绍到这了,更多相关Vue 绑定style和class内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Vue3 Composition API中的提取和重用逻辑

    详解Vue3 Composition API中的提取和重用逻辑

    这篇文章主要介绍了Vue3 Composition API中的提取和重用逻辑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue子父组件之间传值的三种方法示例

    Vue子父组件之间传值的三种方法示例

    Vue的组件化给前端开发带来极大的便利,下面这篇文章主要给大家介绍了关于Vue子父组件之间传值的三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • vue的三种图片引入方式代码实例

    vue的三种图片引入方式代码实例

    这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • vue2.0开发入门笔记之.vue文件的生成和使用

    vue2.0开发入门笔记之.vue文件的生成和使用

    本篇文章主要介绍了vue2.0开发入门笔记之.vue文件的生成和使用 ,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • 前端vue面试总问watch和computed区别及建议总结

    前端vue面试总问watch和computed区别及建议总结

    在现代前端的面试中,vue和react是面试过程中基本必问的技术栈,其中Vue响应式话题,watch和computed是面试官非常喜欢聊的主题,虽然watch和computed它们都用于监听数据的变化,但它们在实现原理、使用场景和行为上有着显著的区别,本文将深入探讨,并提供一些面试过程中的建议
    2023-10-10
  • ant-design-vue按钮样式扩展方法详解

    ant-design-vue按钮样式扩展方法详解

    这篇文章主要为大家介绍了ant-design-vue按钮样式扩展方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue3数据可视化实现数字滚动特效代码

    vue3数据可视化实现数字滚动特效代码

    这篇文章主要介绍了vue3数据可视化实现数字滚动特效,实现思路是使用Vue.component定义公共组件,使用window.requestAnimationFrame(首选,次选setTimeout)来循环数字动画,详细代码跟随小编一起看看吧
    2022-09-09
  • vue + element-ui实现简洁的导入导出功能

    vue + element-ui实现简洁的导入导出功能

    Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI,下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料,需要的朋友可以参考下。
    2017-12-12
  • vuex项目中登录状态管理的实践过程

    vuex项目中登录状态管理的实践过程

    由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长,为了解决这个问题,Vue 提供 vuex,这篇文章主要给大家介绍了关于vuex项目中登录状态管理的相关资料,需要的朋友可以参考下
    2021-09-09
  • vue点击导航页面实现自动滚动到特定位置

    vue点击导航页面实现自动滚动到特定位置

    这篇文章主要介绍了vue点击导航页面实现自动滚动到特定位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论