[Vue] CSS中的v-bind-摩杜云开发者社区

[Vue] CSS中的v-bind

vEdPAeDdfGGE 2024年02月19日 89 0

Vue

在 Vue 中说到v-bind大多数时候都是想到template中动态绑定script中的响应式数据。

但其实在单文件组件(SFC)中，<style>标签内也可以使用v-bind函数绑定数据。

如上图第18行代码，使用v-bind(color)绑定了数据。

当数据变化时，css样式随之变化：

原理：（截取自Vue官方文档）

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。

自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com

上一篇：【Vue前端】vue使用笔记0基础到高手第2篇：Vue进阶知识点介绍（附代码，已分享）下一篇： [Vite] 静态资源的动态访问

分享：

最后一次编辑于 2024年02月19日 0

暂无评论

推荐阅读

Vue3 除了 keep-alive，还有哪些页面缓存的实现方案

wPQfeMurNjxT 2024年05月08日 57 0 0 Vue

vue3早已具备抛弃虚拟DOM的能力了

3A8RnFxQCDqM 2024年05月08日 48 0 0 Vue

Vue模板语法、属性绑定、条件渲染的学习

hCqS9nAImRxU 2024年05月17日 50 0 0 Vue

vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

uCg8iP04yNRs 2024年05月17日 44 0 0 Vue

浅谈Vue.js与原生开发

gYl4rku9YpWY 2024年05月17日 56 0 0 Vue

如何判断一个js对象是否存在循环引用

uCg8iP04yNRs 2024年05月08日 51 0 0 Vue

Vue项目中有封装过axios吗？主要是封装哪方面的？

uCg8iP04yNRs 2024年05月17日 29 0 0 Vue

十分钟，带你了解 Vue3 的新写法

wPQfeMurNjxT 2024年05月08日 55 0 0 Vue

终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的

3A8RnFxQCDqM 2024年05月20日 58 0 0 Vue

你是怎么理解ES6中 Promise的？使用场景？

uCg8iP04yNRs 2024年04月30日 46 0 0 Vue

Vue列表过滤与排序

JZjRRktyDDvK 2024年05月02日 74 0 0 Vue

一款极简的聊天应用

VlNAKfyhjjp9 2024年04月30日 65 0 0 Vue

基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

hGgw0bajsGf1 2024年05月18日 84 0 0 Vue

Vue3+Ts i18n实现国际化

JNTrZmaOQEcq 2024年04月30日 49 0 0 Vue

实现抖音 “视频无限滑动“效果

Wo2WjWKSubMZ 2024年05月17日 47 0 0 Vue

你是怎么处理vue项目中的错误的？

uCg8iP04yNRs 2024年05月17日 50 0 0 Vue

VUE-局部使用

onf2Mh1AWJAW 2024年05月17日 57 0 0 Vue

vue3编译优化之“静态提升”

3A8RnFxQCDqM 2024年05月17日 48 0 0 Vue

我为什么还要造一个前端轮子？

0LYBELHOQl6a 2024年05月17日 55 0 0 Vue

说说webpack proxy工作原理？为什么能解决跨域?

uCg8iP04yNRs 2024年05月17日 44 0 0 Vue

vEdPAeDdfGGE

作者其他文章更多

[Vite] 静态资源的动态访问

2024-02-19

[Vue] CSS中的v-bind

2024-02-19

[前端] DNS解析与优化

2024-02-19

[CSS] 级联与特异性

2024-02-19

[CSS] 响应式设计

2024-02-19

[前端] 重排和重绘

2024-01-17

[软件测试] 06 黑盒边界值测试习题

2023-12-31

[软件测试] 07 黑盒场景法习题

2023-12-31

[软件测试] 第一部分软件测试基础

2023-12-31

[软件测试] 第二部分白盒测试

2023-12-31

最新推荐更多

终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的

2024-05-20

博客园美化：增加顶部炫彩loading进度条

2024-05-20

lodash已死？radash库方法介绍及源码解析 —— 函数柯里化 + Number篇

2024-05-20

TypeScript入门介绍

2024-05-20

XML Schema 复杂元素类型详解：定义及示例解析

2024-05-20

什么是单点登录？如何实现？

2024-05-20

基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

2024-05-18

解释下什么是事件代理？应用场景？

2024-05-18

Vue项目中有封装过axios吗？主要是封装哪方面的？

2024-05-17

浅谈Vue.js与原生开发

2024-05-17

vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

2024-05-17

Vue模板语法、属性绑定、条件渲染的学习

2024-05-17

vue3编译优化之“静态提升”

2024-05-17

VUE-局部使用

2024-05-17

你是怎么处理vue项目中的错误的？

2024-05-17

实现抖音 “视频无限滑动“效果

2024-05-17

说说webpack proxy工作原理？为什么能解决跨域?

2024-05-17

我为什么还要造一个前端轮子？

2024-05-17

一款摸鱼神器！帮助你利用上班时间背单词！

2024-05-17

next-route

2024-05-17