v-bind动态绑定style

对象语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../vue.js"></script>
<div id="app">
<!--  <h2 :style="{key(属性名):value(属性值)}"></h2>-->

<!--  <h2 :style="{fontSize:50px}">{{message}}</h2> 50px不加单引号会当成变量,key不用加-->

  <h2 :style="{fontSize:finalfont}">{{message}}</h2>
  <h2 :style="{fontSize:finalfont1+'px',finalbackground:finalback}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
</div>
<script>
  const vm = new Vue({

    el : '#app',
    data:{
      message:'hello',
      finalfont:'100px',
      finalfont1:100,
      finalback:'red'
    },
    methods:{
      getStyles:function () {
           return {fontSize:this.finalfont}
      }
    }


  })

</script>
</body>
</html>

数组语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../vue.js"></script>
<div id="app">
  <h2 :style="[basestyle,basestyle2]">{{message}}</h2>
</div>
<script>
  const vm = new Vue({

    el : '#app',
    data:{
      message:'hello',
      basestyle:{fontSize:'50px'},
      basestyle2:{background:'red'}
    }



  })

</script>
</body>
</html>

 

posted @ 2021-04-06 16:01  好吗，好  阅读(53)  评论(0)    收藏  举报