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

最新推荐文章于 2022-12-28 21:12:16 发布
最新推荐文章于 2022-12-28 21:12:16 发布
阅读量175 收藏
点赞数 1
分类专栏： web前端学习笔记 文章标签： vue js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45780380/article/details/114289867
版权

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

话不多说直接上代码

<body>
  <div id="app">
    <h2 v-bind:style="[basestyle,baseStyle1]">{{message}}</h2>
  </div>
  <script>
    const app=new Vue({
      el:'#app',
      data:{
        message:'你好啊',
        baseStyle:{backgroundColor:'red'},
        baseStyle1:{fontSize:'100px'},
      }
    })
  </script>
</body>

效果
效果
这是用数组方式绑定样式，达到可以动态改变数组的效果。

终不似、少年游
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础之v-bind属性、class和style用法分析
10-17
在本文中，我们将深入探讨`v-bind`如何与`class`和`style`一起工作，来实现动态的样式和类管理。 首先，让我们从`v-bind`的基本用法开始。`v-bind:attr`可以简写为`:attr`，它允许我们根据数据模型的值来设置HTML...
详解VUE中v-bind的基本用法
08-29
v-bind:class 还有其他几种用法，例如使用数组语法来定义类名： ```html <style> .box { background-color: #ff0; } .textColor { color: #000; } .textSize { font-size: 30px; } </style> [classA, classB]...
v-bind动态绑定style(对象语法、数组语法)
qq_46112274的博客
11-02 515
v-bind动态绑定style--对象语法、数组语法1、对象语法1.1、方法一：当作属性值使用1.2、方法二：当作变量使用1.3、方法三：（属性：值）来自与函数2、数组语法 1、对象语法 1.1、方法一：当作属性值使用 <script> <div id="app"> //<h2 :style="{key(属性名):value:(属性值)}">{{message}}</h2> //把50px当作属性值使用。如果50px不加单引号，那么vue会把5
v-bind绑定style（对象语法/数组语法）
407指导员
12-09 253
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
【学习笔记】11-v-bind动态绑定Style（数组语法）
wersdf22的博客
09-18 345
v-bind动态绑定style的数组语法 在实战中用到的地方非常少，了解下就可以了 示例 <div id="app"> <h1 :style="[style1,style2]">{{message}}</h1> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"&gt
15.样式绑定之class绑定数组用法
code_dream_wq的博客
11-26 1118
v-bind 中支持绑定一个数组 数组中activeClass和 errorClass对应为data中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid...
v-bind用法：类动态绑定对象 数组 style样式 及函数方法
m0_48639378的博客
07-27 1810
v-bind用法：类动态绑定对象 数组 style样式 及函数方法
Vue v-bind动态绑定class实例方法
10-15
类似地，`v-bind:style`也可以动态绑定样式。对象语法允许我们将CSS属性作为键，数据属性的值作为值： ```html <li :style="{color: color, fontSize: size + 'px'}">{{list}} ``` 值可以是直接的字符串，如`'red'...
详解VueJs中的V-bind指令
10-18
**三、v-bind绑定样式（style）** 1. 对象语法： 类似于绑定`class`，`v-bind:style`可以接收一个对象，对象的键是CSS属性名，值是对应的样式值。 ```html <div :style="{ fontSize: size + 'px' }"> ``` 2. ...
Vue.js中用v-bind绑定class的注意事项
11-29
在Vue.js版本：1.0.27，使用Vue.js中V-bind指令来绑定class和style时，Vue.js对其进行了增强。表达式结果出了字符串之外，还可以是对象或者数组。 这里自己对其进行了测试，发现有一下的问题： 如果使用对象语法对...
（补充）v-bind的style的对象语法和数组语法
just-so-so
02-13 263
v-bind的style对象语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--...
v-bind绑定style（数组语句）
qq_52359462的博客
04-02 187
采用数组的语句进行样式的编写 <div id="app"> <h2 :style="[Style,Style1]">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:'#app', d
v-bind 数组语法（004）
weixin_31707323的博客
04-08 151
代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <script src="../js/vue.js"></script> <title>v-bind</title> <style> .box{
Vue 样式绑定 对象语法 数组语法 对象数组一起使用
可控的事情要谨慎，不可控的事情要乐观。
10-08 417
一、对象语法 1.代码 <head> <meta charset="UTF-8"> <title>Title</title> <script src="./jquery-3.3.1.js"></script> <script src="../vue.js"></script&g...
v-bind动态绑定class（数组语法）
vfjcgg的博客
06-05 2245
（了解）v-bind动态绑定class（数组语法） 很多时候我们希望动态的来切换class,比如： 1.当数据为某个状态时，字体显示红色 2.当数据为另一个状态时，字体显示黑色 绑定class有两种方式： 1.对象语法 2.数组语法 绑定方式：对象语法 对象语法的含义是：class后面跟的是一个对象 对象语法有下面这些用法： 用法一：直接通过{}绑定一个类 <h2 class="title" v-bind:class="{active:isActive}">{{message}}</h2
Style 也可以通过对象语法和数组语法进行动态绑定
qq_39250610的博客
09-14 168
一.对象语法 1.定义 data: { activeColor: ‘red’, fontSize: 30 } 2…html 二.数组语法 1.定义 data: { styleColor: { color: ‘red’ }, styleSize:{ fontSize:‘23px’ } } 2.html
vue.js：使用v-bind通过数组绑定多个class案例
零小唬的博客
12-28 547
vue.js：使用v-bind通过数组绑定多个class案例
8. Vue - v-bind 绑定 Style 【对象语法 和 数组语法】
Bi-Hu的博客
06-27 147
之前说过 v-bind 这东西可以绑class 那么必然也可以绑定实style 了，而且 也有 对象语法 和 数组语法： 先来对象语法： 因为我们知道 对象语句是 键 - 值 对的，所以呢 我们的键是 style 的属性，值是对应的值即可，值可以是变量也可以是字符串，如果值不是Vue中的变量，值要加单引号！不然报错. 还有一个点： 比如字体大小 font-Size 其中可以省略掉-，有些版本不...
分析v-bind绑定class和style的实现（文字或图片说明）
最新发布
06-12
对于style属性的绑定，也可以使用对象语法或数组语法。例如： ```html <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> <div v-bind:style="[baseStyles, overridingStyles]"> ``` 其中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值