6vue学习_v-bind绑定style

最新推荐文章于 2024-05-16 12:26:39 发布
最新推荐文章于 2024-05-16 12:26:39 发布
阅读量101 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chencaw/article/details/113247257
版权

1、对style的绑定例子

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

    </style>
</head>
<body>
    <div id ="app">
        <!-- <h2 :style = "{key(属性名):value(属性值)}"> {{message}}</h2>  -->
        <h2 :style = "{fontSize:'50px'}"> {{message}}</h2> 
        <h2 :style = "{fontSize:sizevalue,backgroundColor:colorvalue}"> {{message}}</h2> 
        <h2 :style = "getStyle()"> {{message}}</h2> 
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                sizevalue: '100px',
                colorvalue: 'red',
            },
            methods:{
                getStyle:function(){
                    return {fontSize:this.sizevalue,color:this.colorvalue}
                }
            }
        })
    </script>
</body>

效果如下

 

2、数组形式对style的绑定例子 

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

    </style>
</head>
<body>
    <div id ="app">
        <!-- <h2 :style = "{key(属性名):value(属性值)}"> {{message}}</h2>  -->
        <h2 :style = "{fontSize:'50px'}"> {{message}}</h2> 
        <h2 :style = "{fontSize:sizevalue,backgroundColor:colorvalue}"> {{message}}</h2> 
        <h2 :style = "getStyle()"> {{message}}</h2> 
        <!-- 数组形式对style的绑定例子  -->
        <h2 :style = "[style1,style2]"> {{message}}</h2> 
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                sizevalue: '100px',
                colorvalue: 'red',
                style1:{backgroundColor:'blue'},
                style2:{fontSize:'80px'}
            },
            methods:{
                getStyle:function(){
                    return {fontSize:this.sizevalue,color:this.colorvalue}
                }
            }
        })
    </script>
</body>

chencaw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3中的 媒体特性与Responsive设计属性
qq_42671834的博客
10-09 368
CSS3 媒体特性与Responsive设计 随着科学技术不断地向前发展，网页的浏览终端越来越多样化，用户可以通过宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问网站。尽管无法保证一个网站在不同屏幕尺寸和不同设备上 看起来一模一样， 但至少要让你的Web页面能适配用户的终端， 让它更好地呈现在用户面前。 使用CSS3中的MediaQuery模块来让一个页面适应不同的终端（ 或屏幕尺寸）， ...
vue中通过v-bind绑定style属性
weixin_44748596的博客
10-04 694
1，直接在元素标签上通过:style形式书写样式对象 <h1 :style="{color:'red','font-weight':'200'}">这是一个h1标签</h1> 2，将样式对象定义到data中，并直接引用到:style中 <h1 :style="styleobj1">这是一个h1标签</h1> var vm=new Vue({ ...
vue - v-bind动态绑定属性
asfcyg的博客
06-20 2273
v-bind基本使用 作用：动态绑定指令 语法糖：: 预期：any(with argument)，任意参数 | Object(without argument)，对象 参数：attrOrProp(optional) v-bind:title='doubi' v-bind是指令 title是参数 doubi是预期值 v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值 在开发中需要动态绑定的属性：图片的src、网站的href、动态绑定一些类、样式等 data: { li
vue 动态绑定背景图片
我叫陈小皮。
05-09 5万+
backgroundImage &amp;&amp; 三目运算符 &lt;div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"&gt; &lt;/div&gt; backgroundI...
vue的style方式绑定行内样式-background-image的方式等~
热门推荐
Baby_加油_的博客
01-19 6万+
问题：使用vue加载图片变量，为了图片的自适应，需设置为背景图居中排布 <tr v-for="(item,index) in dataObj"> <td class="video-msg" v-bind:id="item.videoid"> <div class="videoImg fl" v-bind:style="{backgrou...
Vue中Class和Style几种v-bind绑定的用法-详解案例_vue style使用v-bind
2401_84413092的博客
04-29 507
渲染结果与上面相同除此之外，我们还可以使用计算属性去绑定元素的 class。
vue之v-bind绑定style（对象语法）
兮动人
09-10 4553
注意： key: value 表示时，key可以不加单引号或双引号，但value必须加上，或者直接在定义上加上符号 对象语法案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body&g...
Vue中Class和Style几种v-bind绑定的用法-详解案例_vue style使用v-bind(1)
2401_84437604的博客
05-16 323
前端资料汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
11 Vue3中v-bind绑定动态样式和动态样式类
Python私教
12-19 774
v-bind指令可以说是Vue3中最常用的指令之一，使用v-bind，我们几乎能够给任何实现动态的绑定比值。这里，我们主要演示以下，通过v-bind动态绑定CSS样式。
v-bind 绑定 class 与 style 基础用法
zsx0728的博客
03-15 1177
使用 v-bind 指令绑定 class 和 style 时语法相对复杂一些，这两者是可以互相替代的，即 v-bind 绑定 class 属性可以改写成绑定 style 属性，只是 css 属性位置变了而已。
详解vue中v-bind:style效果的自定义指令
10-15
在Vue中，`v-bind:style` 是一个用于动态绑定CSS样式的指令，它可以接受对象或字符串，方便地根据数据变化更新元素的样式。而自定义指令则是Vue提供的一种扩展机制，允许开发者自定义DOM操作。 1. **自定义指令**：...
vue基础之v-bind属性、class和style用法分析
10-17
在Vue.js中，`v-bind`是一个非常重要的指令，用于动态地绑定属性到我们的组件或者元素上。在本文中，我们将深入探讨`v-bind`如何与`class`和`style`一起工作，来实现动态的样式和类管理。 首先，让我们从`v-bind`的...
Vue v-bind动态绑定class实例方法
10-15
在Vue中，`v-bind`指令是用于动态地绑定属性到元素。在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`...
详解VUE中v-bind的基本用法
08-29
v-bind:class 和 v-bind:style 是 Vue 中两个非常重要的指令，它们可以帮助我们动态地将数据绑定到 HTML 元素的属性上。本篇文章详细介绍了 v-bind:class 和 v-bind:style 的基本用法，希望能够帮助读者更好地理解和...
磁力链磁力链磁力链.txt
最新发布
07-22
磁力链
“人力资源+大数据+薪酬报告+涨薪调薪”
07-22
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
安装graphviz和pygraphviz
07-22
pygraphviz 是一个Python库，它是Graphviz图形可视化软件的Python接口。Graphviz是一个开源的图形可视化软件，广泛用于创建和编辑有向图和无向图。pygraphviz使得Python开发者能够轻松地创建和操作图形，以及执行图形的布局和可视化。 一、pygraphviz的主要功能 创建和编辑图形：pygraphviz允许开发者通过Python代码来创建图形，包括添加节点、边等元素，并且可以编辑这些元素的属性，如颜色、形状、标签等。 图形布局：pygraphviz支持多种图形布局算法，如dot、neato、circo等，开发者可以根据需要选择合适的算法来优化图形的布局。 图形可视化：pygraphviz可以将创建和编辑好的图形保存为图片文件，支持多种图片格式，如PNG、JPEG等，方便开发者进行展示和分享。
BrainF**k Devlopment Toolkit
07-22
BrainF**k Devlopment Toolkit(BFDTK)，可用于开发BrainF**k程序。
基于UC3875控制的大功率全桥开关电源设计（提供原理图、PCB图）
07-22
基于UC3875控制的大功率全桥开关电源设计（提供原理图、PCB图） 1、使用UC3875为控制芯片； 2、NCP1253为辅助电源设计，输出12V，给控制芯片供电； 3、UC3845做BOOST升压控制，实现市电整流升压到400V； 4、全桥拓扑设计结构； 5、后级输出同步整流设计； 6、过压硬件保护电路； 7、过流硬件保护电路； 8、提供原理图、PCB图；
使用v-bind绑定Vue的class和style。
03-20
当使用v-bind绑定Vue的class和style时，我们可以使用对象语法或数组语法。对象语法允许我们动态地绑定多个class和style属性，而数组语法则允许我们绑定多个class或style属性。例如，我们可以使用对象语法绑定class和style属性： ``` <div v-bind:class="{ active: isActive, 'text-danger': hasError }" v-bind:style="{ fontSize: size + 'px', color: textColor }"></div> ``` 在上面的例子中，我们使用isActive和hasError变量来动态地绑定class属性，使用size和textColor变量来动态地绑定style属性。 我们也可以使用数组语法来绑定class属性： ``` <div v-bind:class="[activeClass, errorClass]"></div> ``` 在上面的例子中，我们使用activeClass和errorClass变量来绑定class属性，这两个变量可以是字符串或对象。如果是字符串，它们将被直接应用到class属性中；如果是对象，它们将被解析为class属性的键和值。 对于style属性，我们也可以使用数组语法来绑定多个style属性： ``` <div v-bind:style="[baseStyles, overridingStyles]"></div> ``` 在上面的例子中，我们使用baseStyles和overridingStyles变量来绑定style属性，这两个变量应该是对象，它们将被解析为style属性的键和值。如果有相同的键，overridingStyles中的值将覆盖baseStyles中的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值