vue中class和style属性

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>class与style 属性</title>
</head>
<style>
  .active,
  .activeClass {
    color: red;
    width: 100px;
    border: 1px solid #ccc;
    height: 100px;
  }
</style>

<body>
  <div class="app">
    <!---绑定 HTML Class----------------------------->
    <!--对象语法-->
    <div v-bind:class="{active:at}">2</div>
    <div v-bind:class="{active:at,alink:al}">3</div>
    <div v-bind:class="obj">4</div>
    <div v-bind:class="objClass">5</div>
    <!--数组语法-->
    <div v-bind:class="[activeClass, errorClass]">数组</div>
    <div v-bind:class="[isActive ? activeClass : '', errorClass]">数组</div>

    <!--用在组件上-->
    <my-component class="baz boo">组件</my-component>
    <my-component v-bind:class="{at}">组件</my-component>

    <!---绑定内联样式---------------------------->
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">内联</div>
    <div v-bind:style="styleObject">直接绑定到一个样式对象</div>
    <!--数组语法-->
    <div v-bind:style="[baseStyles, overridingStyles]">内联数组语法</div>

  </div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">

  Vue.component('my-component', {
    template: '<p class="foo bar">Hi</p>'
  })

  var vm = new Vue({
    el: '.app',
    data: {
      msg: '',
      activeClass: 'active',
      errorClass: 'text-danger',
      activeColor: 'red',
      fontSize: 50,
      at: true, //true|false
      al: false,
      err: null,
      isActive: true,

      obj: { //可做一个对象
        active: true, //true|false
        alink: false,
      },
      baseStyles: {
        color: 'red',
        'font-size': '20px'
      },
      styleObject: {
        color: 'red',
        fontSize: '13px'
      },
      overridingStyles: {
        width: '200px',
        fontSize: '63px'
      }
    },
    computed: { //计算属性
      objClass: function() { //可做一个对象方法
        return {
          active: this.at && !this.err, //为true 并且不为null
          'text-align': this.err && this.err.type === 'fatal'
        }
      }
    }

  });
</script>
</html>
vue中class和style属性

猜你喜欢
