Vue之动态绑定style

最新推荐文章于 2024-05-15 10:50:59 发布

gyuei

最新推荐文章于 2024-05-15 10:50:59 发布

阅读量905

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/gyueh/article/details/111563724

版权

Vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.对象语法

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- blue和20px必须加单引号,否则会按照变量进行解析 -->
    <h2 v-bind:style="{color:'blue',fontSize:'20px' }">我是标题</h2>
    <!-- activeColor和activeSize是当作变量进行解析的 -->
    <h2 v-bind:style="{color:activeColor,fontSize: activeSize + 'px' }">我是标题</h2>
  </div>
</body>
<script src="../js/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      activeColor:'red',
      activeSize:40
    }
  })
</script>
</html>

注意：
1.属性名后的值加引号时,属性值会直接对元素进行渲染
2.属性名后的值不加引号时,属性值会当作变量进行解析

最终效果如图所示：
在这里插入图片描述

2.数组语法

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2 v-bind:style="[baseStyles,overridingStyles]">我是标题</h2>
  </div>
</body>
<script src="../js/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      baseStyles:{color:'red',fontSize:'50px'},
      overridingStyles:{background:'yellow',border:'1px solid #eeeeee'}
    }
  })
</script>
</html>

最终效果如图所示：
在这里插入图片描述

gyuei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue之动态绑定style

1.对象语法示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div
复制链接

扫一扫

专栏目录