Vue的style绑定

Posted apebro

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的style绑定相关的知识，希望对你有一定的参考价值。

style绑定

1、绑定的数据都在data中，所以通过this可以直接访问；

2、绑定有三种方式：

? 1、{}方式，其实就是直接将具体样式绑定；

? 2、样式对象名绑定；

? 3、[]多个样式对象名绑定；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div v-bind:style=‘{border: borderStyle, width: widthStyle, height: heightStyle}‘></div>
    <div v-bind:style=‘objStyles‘></div>
    <div v-bind:style=‘[objStyles, overrideStyles]‘></div>
    <button v-on:click=‘handle‘>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定之内联样式Style：
      
    */
    var vm = new Vue({
      el: ‘#app‘,
      data: {
        borderStyle: ‘1px solid blue‘,
        widthStyle: ‘100px‘,
        heightStyle: ‘200px‘,
        objStyles: {
          border: ‘1px solid green‘,
          width: ‘200px‘,
          height: ‘100px‘
        },
        overrideStyles: {
          border: ‘5px solid orange‘,
          backgroundColor: ‘blue‘
        }
      },
      methods: {
        handle: function(){
          this.heightStyle = ‘100px‘;
          this.objStyles.width = ‘100px‘;
        }
      }
    });
  </script>
</body>
</html>

以上是关于Vue的style绑定的主要内容，如果未能解决你的问题，请参考以下文章

05《Vue 入门教程》Vue 动态样式绑定

VUE强制绑定class和style

vue中的class与style绑定

vue.js实战学习——v-bind 及class与 style绑定

JS，Vue2，事件处理，计算属性，监视属性，class与style绑定

Vue的style绑定