• Tags
  •         
  • www.breakyizhan.com
  •    

    Vue.js 样式绑定主要有:

    • Vue.js Class属性样式绑定
    • Vue.js Style内联样式绑定

    因为Class和Style它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过字符串的计算容易出错,因此,VUE除了处理字符串之外,还增加了对象和数组的处理。

    Class属性样式绑定

    除了可以使用原生的 class 类属性之外,vue 提供了 v-bind:class 来使用类样式

    比如:改变 div 的背景色,给 div 绑定到 class: active,而Class属性样式绑定又有三种:字符串,对象和数组。

    Class属性样式绑定字符串

    对于Class属性样式绑定字符串的,可以用下面的语法,可以看到v-bind通过表达式计算出字符串结果:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</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>
    

    尝试一下 >>

    Class属性样式绑定对象

    那么,上面的例子用Class属性绑定对象的代码应该怎么写呢?我们可以看到,两者达到的效果是一样的:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</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>
    

    尝试一下 >>

    此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:

    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
    .base {
      width: 100px;
      height: 100px;
    }
    
    .active {
      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: {
        isActive: true,
        error: {
          value: true,
          type: 'fatal'
        }
      },
      computed: {
        classObject: function () {
          return {
      base: true,
            active: this.isActive && !this.error.value,
            'text-danger': this.error.value && this.error.type === 'fatal',
          }
        }
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Class属性样式绑定数组

    我们也可以把数组传给v-bind:class,可以看到,v-bind以应用一个 class 列表:

     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</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="[activeClass, errorClass]"></div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Class属性样式绑定字符串之三元表达式

    使用三元表达式来切换列表中的 class :

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
    .text-danger {
    	width: 100px;
    	height: 100px;
    	background: red;
    }
    .active {
    	width: 100px;
    	height: 100px;
    	background: green;
    }
    </style>
    </head>
    <body>
    <div id="app">
    	<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
    	activeClass: 'active',
        errorClass: 'text-danger'
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Style内联样式绑定

    Style内联样式绑定和Class列表都是操作属性的,也是有三种样式绑定:字符串,对象和数组(2.3:多重值)。

    Style内联样式绑定字符串

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Break易站</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        activeColor: 'green',
    	fontSize: 30
      }
    })
    </script>
    </body>
    </html>
     

    尝试一下 >>

    Style内联样式绑定对象

     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <div v-bind:style="styleObject">Break易站</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px'
        }
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Style内联样式绑定数组

     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <div v-bind:style="[baseStyles, overridingStyles]">Break易站</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        baseStyles: {
          color: 'green',
          fontSize: '30px'
        },
    	overridingStyles: {
          'font-weight': 'bold'
        }
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Style内联样式绑定多重值,多重值的绑定是从2.3开始之后的,提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

     
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

    这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex

     
    转载请保留页面地址:https://www.breakyizhan.com/vue/6686.html