• vue.js样式绑定

    class

    class和style是html元素的属性，用于设置元素的样式。我们可以 用v-bind来设置样式属性。Vue.js v-bind在处理class和style是，专门增强了它。表达式的结果练习除了字符串之外，还可以是对象或数组。

    class属性绑定

    我们可以为v-bind：class设置一个对象，从而动态的切换class：

    示例1

    例子中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script type="text/javascript" src="../js/vue.js">script>
    7. 		<style>
    8. 			.active {
    9. 				width: 100px;
    10. 				height: 100px;
    11. 				background: green;
    12. 			}
    13. 		style>
    14. 	head>
    15. 	<body>
    16. 		<div id="app">
    17. 			<div v-bind:class="{ 'active': isActive }">div>
    18. 		div>
    19. 		<script>
    20. 			new Vue({
    21. 				el: '#app',
    22. 				data: {
    23. 					isActive: true
    24. 				}
    25. 			})
    26. 		script>
    27. 	body>
    28. html>

    以上示例div class为：

    class="active">

    示例2

    text-danger 类背景颜色覆盖了 active 类的背景色：
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 		<style>
    8. 			.active {
    9. 				width: 100px;
    10. 				height: 100px;
    11. 				background: green;
    12. 			}
    13.  
    14. 			.text-danger {
    15. 				background: red;
    16. 			}
    17. 		style>
    18. 	head>
    19. 	<body>
    20. 		<div id="app">
    21. 			<div class="static" v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
    22. 			div>
    23. 		div>
    24.  
    25. 		<script>
    26. 			new Vue({
    27. 				el: '#app',
    28. 				data: {
    29. 					isActive: true,
    30. 					hasError: true
    31. 				}
    32. 			})
    33. 		script>
    34. 	body>
    35. html>

    以上示例div class为：

    <div class="static active text-danger">div>

    我们也可以直接绑定数据里的一个对象

    示例3

    text-danger 类背景颜色覆盖了 active 类的背景色：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 		<style>
    8. 			.active {
    9. 				width: 100px;
    10. 				height: 100px;
    11. 				background: green;
    12. 			}
    13.  
    14. 			.text-danger {
    15. 				background: red;
    16. 			}
    17. 		style>
    18. 	head>
    19. 	<body>
    20. 		<div id="app">
    21. 			<div v-bind:class="classObject">div>
    22. 		div>
    23.  
    24. 		<script>
    25. 			new Vue({
    26. 				el: '#app',
    27. 				data: {
    28. 					classObject: {
    29. 						active: true,
    30. 						'text-danger': true
    31. 					}
    32. 				}
    33. 			})
    34. 		script>
    35. 	body>
    36. html>

    示例3和示例2的渲染结果是一样的。

  • 相关阅读:
    运行 LIO-SAM 建议安装的 gtsam 版本
    HttpClient实现RPC解析（通过Get方式访问）
    Python文件操作
    Blazor前后端框架Known-V1.2.14
    低代码开发平台哪些好用
    会场及展位变更通知 | GOPS全球运维大会地址更改，龙智展位更换至#106
    Eureka Server 实现在线扩容
    future其他成员函数、shared_future、atomic
    ubuntu20.0安装 java并配置环境
    解放计算力：使用并行处理提升python for循环速度
  • 原文地址：https://blog.csdn.net/m0_68633696/article/details/126124843