vue之v-bind绑定style（对象语法）

在这里插入图片描述
在这里插入图片描述

  • 注意： key: value 表示时，key可以不加单引号或双引号，但value必须加上，或者直接在定义上加上符号

在这里插入图片描述
在这里插入图片描述

  • 对象语法案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

</style>
<body>

   <div id="app">
<!-- <h2 :style="{key{属性值}: value(属性值)}">messa</h2> -->

<!-- value(50px) 必须加上单引号，否则是当做一个变量去解析      -->
<!-- <h2 :style="{fontSize: '50px'}">{{message}}</h2>       -->

<!-- finalSize当做一个变量使用       -->
<!--          <h2 :style="{fontSize: finalSize}">{{message}}</h2>-->
<!--       -->
       <h2 :style="{fontSize: finalSize + 'px',backgroundColor: finalColor}">{{message}}</h2>
       <h2 :style="getStyles()">{{message}}</h2>
   </div>

   <script src="../js/vue.js"></script>
   <script>
           const app = new Vue({
               el: '#app',
               data: {
                   message: 'hello vue',
                   finalSize: 100,
                   finalColor: 'red',
               },
               methods: {
                    getStyles: function () {
                        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
                    }
               }
           })
   </script>

</body>
</html>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 数组语法案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
          <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'hello vue',
                    baseStyle: {backgroundColor: 'red'},
                    baseStyle1: {fontSize: '100px'}
                }
            })
    </script>
</body>
</html>

在这里插入图片描述

posted @ 2020-09-10 09:49  兮动人  阅读(322)  评论(0)  编辑  收藏  举报