04.v-bind 绑定style属性

最新推荐文章于 2023-08-12 11:25:32 发布

@司马懿

最新推荐文章于 2023-08-12 11:25:32 发布

阅读量114

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/118695302

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

v-bind 绑定style属性

代码如下：

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

</head>
<body>

<div id="app">
   
    <!--
        v-bind 动态绑定style 属性
        <h2 :style="{key(属性名):value(属性值)}"></h2>
    -->
    <!--
     ’50px' 必须加上单引号，否则是当做一个变量去解析
    下面两种写法效果一致
    -->
    <h2 :style="{fontsize:'50px'}">{{message}}</h2>
    <h2 :style="{fontsize:sizess}">{{message}}</h2>

</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '你好啊，华为',
      sizess: '50px'
    }
  })
</script>
</body>
</html>