首页> 基础笔记 >Vue学习笔记 >基础和指令基础和指令

Vue动态绑定style的几种方式

作者：小萝卜 2024-03-10 【 Vue 】浏览 640

简介绑定有三种方式： 1、{}方式，其实就是直接将具体样式绑定； 2、样式对象名绑定； 3、[]多个样式对象名绑定；

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>

很赞哦！ (0)

上一篇：vue侦听器watch介绍

下一篇：vue动态绑定class的最常用几种方式：