页面元素样式绑定

页面元素样式绑定

1. 绑定HTML中Class

在 Vue 中，操作元素的 class 列表和内联样式是数据绑定的一个常见需求

由于 class 与内联样式都是 HTML 元素属性，可以通过 v-bind 指令去处理

1-1 对象语法

可以将一个对象传给 v-bind:class，用于动态切换 class，class是否存在取决于定义的数据属性值是否为真

• 可以在对象中传入更多字段来动态切换多个 class
• v-bind:class 指令也可以与元素自身定义的 class 属性共存

<div id="app">
  <!-- 元素自身定义的class与绑定的class可以同时存在 -->
  <h3 class="headtitle" v-bind:class="{active: isActive}" v-on:click="changeColor">绑定元素class对象语法</h3>
</div>

<script src="../vue.js"></script>

<script>
  const vm = new Vue({
    el: '#app',
    data: function() {
      return {
        isActive: true
      }
    },
    methods: {
      changeColor() {
        // 对象语法用来动态切换class
        this.isActive = !this.isActive
      }
    }
  })
</script>

也可以通过 computed 计算属性，返回一个对象作为 class 属性绑定

<h3 v-bind:class="classObject">计算属性返回对象</h3>

<script src="../vue.js"></script>

<script>
  const vm = new Vue({
    el: '#app',
    data: function() {
      return {
        isActive: true
      }
    }
    computed: {
      classObject: function() {
        return {
          active: !this.isActive
        }
      }
    }
  })
</script> 

1-2 数组语法

可以把一个数组传给 v-bind:class，以创建一个 class 列表

• 数组语法中可以使用三元表达式切换列表中的 class
• 也可以在该语法中插入对象语法

<div id="app">
  <!-- 数组语法同时绑定多个class -->
  <h3 v-bind:class="[activeClass, hiddenClass]">绑定元素class数组语法</h3>
  <!-- 通过三元表达式切换class列表中的class -->
  <h3 v-bind:class="[isActive ? activeClass : '', hiddenClass]">三元表达式切换class</h3>
  <!-- 对象语法嵌套对象语法 -->
  <h3 v-bind:class="[{active: isActive}, hiddenClass]">对象语法嵌套对象语法</h3>
</div>

<script src="../vue.js"></script>

<script>
  const vm = new Vue({
    el: '#app',
    data: function() {
      return {
        isActive: true,
        activeClass: 'active',
        hiddenClass: 'hidden'
      }
    }
  })
</script>

1-3 组件上绑定

当在一个自定义组件上使用 class 时，这些 class 将被添加到该组件的根元素上面

这个元素上已经存在的 class 类不会被覆盖

<div id="app">
  <!-- 组件上绑定的class会添加到元素class属性内 -->
 <my-component v-bind:class="{active: isActive}"></my-component>
</div>

<script src="../vue.js"></script>

<script>
  // 组件绑定class
  Vue.component('my-component', {
    // 元素上自定义class不会覆盖
    template: '<h3 class="hello">在组件上绑定</h3>'
  })

  const vm = new Vue({
    el: '#app',
    data: function() {
      return {
        isActive: true
      }
    }
  })
</script>

2. 绑定内联样式

2-1 对象语法

可以通过 v-bind:style 绑定元素 style 属性设置内联样式

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case 记得用引号括起来) 来命名

• 可以直接绑定一个样式对象上
• 也可以结合计算属性使用返回一个样式对象

<div id="app">
  <!-- v-bind:style 通过绑定元素style属性来设置内联样式 -->
  <!-- 驼峰式命名css属性不需要引号，短横线分隔需要引号括起来 -->
  <h3 v-bind:style="{color: headTitleColor, 'font-size': headTitleFont + 'px'}">绑定内联样式</h3>
  <!-- 直接绑定一个样式对象 -->
  <h3 v-bind:style="headTitleStyle">直接绑定一个样式对象</h3>
  <!-- 通过计算属性绑定 -->
  <h3 v-bind:style="headTitle">通过计算属性绑定</h3>
</div>

<script src="../vue.js"></script>

<script>
  const vm = new Vue({
    el: '#app',
    data: function() {
      return {
        headTitleColor: '#4d34db',
        headTitleFont: 30,
        headTitleStyle: {
          color: '#1abc9c',
          fontSize: '30px'
        }
      }
    }, 
    computed: {
      headTitle() {
        return {
          color: '#9b59b6',
          fontSize: '30px'
        }
      }
    }
  })
</script>

2-2 数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

也可以直接返回一个数组形式，数组中包含多个样式对象

<div id="app">
  <!-- 通过数组语法绑定多个样式对象时 -->
  <h3 v-bind:style="[headTitleFonts, headTitleColor]">通过数组语法绑定内联样式</h3>
  <h3 v-bind:style="styleArr">直接绑定一个带有样式对象的数组</h3>
</div>

<script src="../vue.js"></script>

<script>
  const vm = new Vue({
    el: '#app',
    data: function() {
      return {
        headTitleColor: {
          color: '#1abc9c'
        },
        headTitleFonts: {
          fontSize: '30px'
        },
        styleArr: [
          { color: '#1abc9c' },
          { fontSize: '30px' }
        ]
      }
    }
  })
</script>

2-3 前缀与多重值

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀

从 2.3.0 起你可以为 style 绑定中的样式属性提供一个包含多个值的数组，常用于提供多个带前缀的值

• css 属性，vue 会自动侦测并添加相应浏览器引擎前缀
• css 属性值，可以通过提供一个数组，数组值包含多个带前缀的值供浏览器支持选择，浏览器只会渲染数组中最后一个被浏览器支持的值

浏览器只会渲染数组中最后一个被浏览器支持的值

<div id="app">
  <!-- vue会自动侦测添加相应的前缀 -->
  <h3  v-bind:style="{transform: 'translate(10px, 10px)'}">vue会自动侦测添加相应的前缀</h3>
  <!-- 提供包含多个值的数组 -->
  <!-- 渲染数组中最后一个被浏览器支持的值 -->
  <h3 :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">提供包含多个值的数组</h3>
</div>