vue中属性绑定（Vue｜样式绑定）

时间2025-05-02 08:03:56分类IT科技浏览3357

导读：class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。...

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

文末名片获取源码

精彩专栏持续更新推荐订阅，收藏关注不迷路

微信小程序实战开发专栏

一. 样式绑定

开始前的准备工作如下：预设好的style样式，html容器以及vue实例对象

启动项目后效果如下

目前所看到的样式效果是我们在style中定义的同时通过class进行指定的，那么需求就来了，如何做到点击div的时候给它换一个背景色呢?

在JS中是可以通过操作dom的方式来修改元素的class属性的

var div = document.getElementById("div1"); div.className = "style2"; div.setAttribute("class","style2");

但是既然使用了vue ，入乡随俗肯定要用vue的方式来解决，而且用传统的方式来修改也有着不确定性，因为在界面中，需要操作的元素样式可能是不断变化的；

在标签中通过v-bind简写的方式再增加一个class，同时增加一个点击事件

在css定义好basic2的样式，启动项目，可以看到当点击div时，字体以及背景颜色都发生了变化，这说明动态指定class的事件生效了

在网页右击查看源代码可以看到，div上面的class只剩一个了，但是我们代码里面是两个，这是因为动态指定的class样式最终会自行汇聚成一个正常的class样式

这一小节要讲的是针对与样式的个数以及名字不确定的场景，通过数组写法绑定class样式

首先在style中准备三个不同效果的class样式

.cat1{ width: 200px; height: 200px; color: green; } .cat2{ background: yellow; } .cat3{ font-weight: bold; }

在vue实例中定义一个数组并将class名进行指定

在html中的div标签中对arr进行绑定

运行项目可以看到数组方式的样式也绑定上去了，数组方式绑定class样式适用于样式的个数以及名字不确定的场景

对象写法绑定class样式，适用于样式的个数以及名字都确定的场景,但是要根据业务场景动态决定是否使用，可以简单应用到当切换tab时根据不同的下标展示不同的效果

在vue实例data中定义对象如下，以普通的键值对方式存储，键为需要绑定的class名称，值为bool类型，需要展示则为true，反之则为false

info:{ cat1:false, cat2:false, },

在页面标签中对样式进行绑定，因为在数据中两个class都为false ，所以页面解析后是没有任何样式绑定的

将定义的值修改为true，再次刷新页面，这一次就能渲染上去了

内联样式绑定,适用于需要在行内根据数据形态做不同的展示的场景，常规的内联样式如下

在vue中还是通过v-bing简写的方式进行绑定，不过需要加上单括符，不要忘了在data中进行定义

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。