Vue3 使用 v-bind 动态绑定 CSS 样式

简介: Vue3 使用 v-bind 动态绑定 CSS 样式

Vue3 中,可以通过 v-bind 动态绑定 CSS 样式。


语法格式:


color: v-bind(数据);


基础使用:


<template>
  <h3 class="title">我是父组件</h3>
  <button @click="state = !state">按钮</button>
</template>
 
<script setup>
import { ref } from "vue";
let state = ref(true);
</script>
 
<style scoped>
.title {
  /* 使用 v-bind 绑定 CSS 样式 */
  color: v-bind("state ? 'red' : 'blue'");
}
</style>


效果:



v-bind 中可以不加双引号,这里只是避免 vscode 语法警告。


相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
5天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
2天前
|
前端开发
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
9 1
|
2天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
5 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
7天前
|
前端开发
css定制样式
【7月更文挑战第1天】css定制样式
13 2
|
7天前
|
前端开发
CSS样式层叠
CSS样式层叠
11 0
CSS样式层叠
|
2天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
9 0
|
6天前
|
Web App开发 前端开发
设计,兼容性----字体-------Css样式的字体,字体样式导入
设计,兼容性----字体-------Css样式的字体,字体样式导入
|
6天前
|
前端开发
设计--字体样式---斜体,CSS字体属性用法
设计--字体样式---斜体,CSS字体属性用法
|
6天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
12 0