Vue.js 样式绑定

最新推荐文章于 2024-09-11 17:21:15 发布

书香水墨

最新推荐文章于 2024-09-11 17:21:15 发布

阅读量189

点赞数

分类专栏：前端文章标签： node.js java kafka

本文链接：https://blog.csdn.net/qq_27870421/article/details/123309836

版权

前端专栏收录该内容

178 篇文章 7 订阅

订阅专栏

本文通过实例代码详细介绍了Vue.js中如何使用v-bind:class和v-bind:style进行动态绑定样式和类，包括单个条件类绑定、多个类组合绑定、样式对象和数组语法的使用，展示了Vue.js在前端开发中实现动态样式的灵活性。

摘要由CSDN通过智能技术生成

`一、class 属性绑定`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ 'active': isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div class="static"
     v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	hasError: true
  }
})
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>
</body>
</html>

`二、数组语法`

<div v-bind:class="[activeClass, errorClass]"></div>

// 使用三元表达式来切换列表中的 class 
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

`三、Vue.js style(内联样式)`

3.1 在 v-bind:style 直接设置样式：

<div id="app">
    <div v-bind:style="{ color: activeColor, 
    	fontSize: fontSize + 'px' }">
    	Test
    </div>
</div>

3.2 直接绑定到一个样式对象

<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>

3.3 v-bind:style 使用数组将多个样式对象应用到一个元素上

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

书香水墨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js 样式绑定

一、class 属性绑定<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>.active { width: 100px; height
复制链接

扫一扫