• 10.Vue2-样式绑定的用法

    题记

            vue2样式绑定的用法

    class属性绑定

    vi-bind:class
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. <style>
    8. .active {
    9. 	width: 100px;
    10. 	height: 100px;
    11. 	background: blue;
    12. }
    13. style>
    14. head>
    15. <body>
    16. <div id="app">
    17.   <div v-bind:class="{ 'active': isActive }">div>
    18. div>
    19.  
    20. <script>
    21. new Vue({
    22.   el: '#app',
    23.   data: {
    24.     isActive: true
    25.   }
    26. })
    27. script>
    28. body>
    29. html>

            等于：

     在对象中传入属性
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. <style>
    8. .active {
    9. 	width: 100px;
    10. 	height: 100px;
    11. 	background: blue;
    12. }
    13. .text-danger {
    14. 	background: red;
    15. }
    16. style>
    17. head>
    18. <body>
    19. <div id="app">
    20.   <div class="static"
    21.      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>

            等于：

    绑定数据里的对象 
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. <style>
    8. .active {
    9. 	width: 100px;
    10. 	height: 100px;
    11. 	background: blue;
    12. }
    13. .text-danger {
    14. 	background: red;
    15. }
    16. style>
    17. head>
    18. <body>
    19. <div id="app">
    20.   <div v-bind:class="classObject">div>
    21. div>
    22.  
    23. <script>
    24. new Vue({
    25.   el: '#app',
    26.   data: {
    27.     classObject: {
    28.       active: true,
    29.       'text-danger': true
    30.     }
    31.   }
    32. })
    33. script>
    34. body>
    35. html>
    绑定返回对象的计算属性
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. <style>
    8. .base {
    9.   width: 100px;
    10.   height: 100px;
    11. }
    12.  
    13. .active {
    14.   background: blue;
    15. }
    16.  
    17. .text-danger {
    18.   background: red;
    19. }
    20. style>
    21. head>
    22. <body>
    23. <div id="app">
    24.   <div v-bind:class="classObject">div>
    25. div>
    26. <script>
    27.  
    28. new Vue({
    29.   el: '#app',
    30.   data: {
    31.     isActive: true,
    32.     error: {
    33.       value: true,
    34.       type: 'fatal'
    35.     }
    36.   },
    37.   computed: {
    38.     classObject: function () {
    39.       return {
    40.   base: true,
    41.         active: this.isActive && !this.error.value,
    42.         'text-danger': this.error.value && this.error.type === 'fatal',
    43.       }
    44.     }
    45.   }
    46. })
    47. script>
    48. body>
    49. html>
    把数组传给v-bind:class
    1. DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. <style>
    8. .active {
    9. 	width: 100px;
    10. 	height: 100px;
    11. 	background: blue;
    12. }
    13. .text-danger {
    14. 	background: red;
    15. }
    16. style>
    17. head>
    18. <body>
    19. <div id="app">
    20. 	<div v-bind:class="[activeClass, errorClass]">div>
    21. div>
    22.  
    23. <script>
    24. new Vue({
    25.   el: '#app',
    26.   data: {
    27.     activeClass: 'active',
    28.     errorClass: 'text-danger'
    29.   }
    30. })
    31. script>
    32. body>
    33. html>

             等于：

    三元表达式 
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. <style>
    8. .text-danger {
    9. 	width: 100px;
    10. 	height: 100px;
    11. 	background: red;
    12. }
    13. .active {
    14. 	width: 100px;
    15. 	height: 100px;
    16. 	background: blue;
    17. }
    18. style>
    19. head>
    20. <body>
    21. <div id="app">
    22. 	<div v-bind:class="[errorClass ,isActive ? activeClass : '']">div>
    23. div>
    24.  
    25. <script>
    26. new Vue({
    27.   el: '#app',
    28.   data: {
    29.     isActive: true,
    30. 	activeClass: 'active',
    31.     errorClass: 'text-danger'
    32.   }
    33. })
    34. script>
    35. body>
    36. html>

     内联样式

     v-bind:style
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10. 	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">ngxediv>
    11. div>
    12.  
    13. <script>
    14. new Vue({
    15.   el: '#app',
    16.   data: {
    17.     activeColor: 'blue',
    18. 	fontSize: 30
    19.   }
    20. })
    21. script>
    22. body>
    23. html>

             等于：

    color: blue; font-size: 30px;">ngxe

    绑定样式对象 
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.   <div v-bind:style="styleObject">ngxediv>
    11. div>
    12.  
    13. <script>
    14. new Vue({
    15.   el: '#app',
    16.   data: {
    17.     styleObject: {
    18.       color: 'blue',
    19.       fontSize: '30px'
    20.     }
    21.   }
    22. })
    23. script>
    24. body>
    25. html>
     使用数组绑定样式
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.   <div v-bind:style="[baseStyles, overridingStyles]">ngxediv>
    11. div>
    12.  
    13. <script>
    14. new Vue({
    15.   el: '#app',
    16.   data: {
    17.     baseStyles: {
    18.       color: 'blue',
    19.       fontSize: '30px'
    20.     },
    21. 	overridingStyles: {
    22.       'font-weight': 'bold'
    23.     }
    24.   }
    25. })
    26. script>
    27. body>
    28. html>

     后记

             觉得有用可以点赞或收藏！ 

  • 相关阅读:
    M1芯片使用android-emulator-m1-preview模拟器提示INSTALL_FAILED_INSUFFICIENT_STORAGE 解决办法
    排序算法之-快速
    Linux学习笔记(2)—文件基本属性
    Java 中的数据类型有哪些？
    辅助解决小白遇到的电脑各种问题
    C#实现访问OPC UA服务器
    长期戴耳机的危害有哪些？有哪些耳机不伤听力吗？
    保姆级使用PyTorch训练与评估自己的EfficientFormer网络教程
    日报系统：优化能源行业管理与决策的利器
    微信小程序页面间传值方法
  • 原文地址：https://blog.csdn.net/m0_70819559/article/details/134081606