v-bind绑定style（对象语法/数组语法）

最新推荐文章于 2023-02-11 01:21:38 发布

407指导员

最新推荐文章于 2023-02-11 01:21:38 发布

阅读量258

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110933822

版权

vue 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

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

<h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>

在写CSS属性名的时候，比如font-size

1.我们可以使用驼峰式 (camelCase) fontSize

2.或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{'font-size':'50px'}">{{message}}</h2>

注意：如果不采用驼峰命名，就一定要加单引号，因为一旦绑定了vue语法，他就会将里边未加单引号的字符串当成变量名，就算是50px也会被当成变量名，所以如果是字符串就要加上单引号。

在这里插入图片描述

多种写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绑定style</title>
</head>
<body>
<div id="app">
  <h2 :style="{fontSize:'50px'}">{{message}}</h2>
  <h2 :style="{fontSize:finalSize +'px'}">{{message}}</h2>
  <h2 :style="getStyle()">{{message}}</h2>
  <!--  <h2 :style="{'font-size':'50px'}">{{message}}</h2>-->
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize: 50,
    },
    methods: {
      getStyle: function () {
        return {fontSize: this.finalSize + 'px'};
      }
    }
  });
</script>
</body>
</html>

在这里插入图片描述

v-bind绑定style（数组语法）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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: '你好啊',
      baseStyle:{backgroundColor:'red'},
      baseStyle1:{fontSize:'50px'},

    }
  });
</script>
</body>
</html>

在这里插入图片描述

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind绑定style（对象语法/数组语法）

v-bind绑定style（对象语法）<h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>在写CSS属性名的时候，比如font-size 1.我们可以使用驼峰式 (camelCase) fontSize 2.或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’<h2 :style="{fontSize:'50px'}">{{message}}&lt
复制链接

扫一扫

专栏目录