vue的v-bind指令动态绑定style

3月

本文最后更新于2020年03月14日，已经过了1713天没有更新，若内容或图片失效，请留言反馈

普通用法
style中的css属性名可以用驼峰命名发，也可以用“-”分割

text 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
        <h2 :style="{font-size:finalSize,color:finalColor}">{{message}}</h2>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",
            data:{
                message:"this is vue",
                finalSize:'50px',
                finalColor:'red'
            }
        })
    </script>
</body>
</html>

为了让模板更清晰，可以为上style绑定一个对象

text 代码:

 <h2 :style="styleObject">{{message}}</h2>


  data:{
     message:"this is vue",
     styleObject:{
          fontSize:"50px",
          color:"#3af"
     }
  }

数组语法

text 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2 :style="[styleobj1,styleobj2]">{{message}}</h2>
    </div>
            
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        
        const app = new Vue({
            el:"#app",
            data:{
                message:"this is vue",
                styleobj1:{
                    fontSize:"50px",
                    color:"#3af"
                },
                styleobj2:{
                    fontSize:"50px",
                    color:"red"
                }
            }
        })
    </script>
</body>
</html>

组语法可以将多个样式对象应用到同一个元素上,同时应用多个样式对象时，后运用的对象会覆盖前面对象中相同的属性。
代码运行结果为50px大的红色字体
styleobj1中的color属性被styleobj2中的color属性覆盖。

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢