样式的双向绑定的2种方式,实现样式交互效果

与样式标签实现双向绑定

  • 通过布尔值来决定样式是出现还是消失

    show代表着布尔值,show的初始值是false所以文本不会有高亮的效果,当用户点击了按钮,就会调用shows这个函数,并将show的相反值true赋值并覆盖给show,此时show的值为true,这个时候样式起效实现高亮效果

<template>
<div :class="{'backgroundColor': show}">王侯将相另有种乎</div>
<div><button @click="shows">高亮</button></div>
</template><script setup>
import {ref} from 'vue'
const show = ref(false)
const shows = () =>{show.value =! show.value
}
</script><style>
.backgroundColor{background-color: yellow
}
</style>
  • 效果如下:

在这里插入图片描述

在这里插入图片描述

  • 列表格式的样式绑定

    用于实现多从复杂的效果样式,指那些通过用户交互实现双向绑定的样式效果,例如用户在色彩盘中选择颜色,对应背景颜色,字体等样式发生改变。这样使得页面上的效果有了交互的效果,可以用于用户的自定义个性化界面!!!在双向样式绑定数组中可以无限添加新的样式,若出现重复的样式,后面的样式会覆盖前面的样式。

<template><p     :style="[obj,obj2]"   >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas eum suscipit beatae hic omnis. Quisquam saepe recusandae quas in, esse ipsum eius id perspiciatis minus earum? Qui nemo atque neque!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos debitis enim quis possimus, natus quia voluptatem vero amet numquam, necessitatibus, ratione deserunt culpa similique aperiam facilis modi ducimus officiis? Aspernatur.</p><hr>
调整字体的颜色:<input type="color" v-model="obj.color"><hr>
调整背景的颜色:
<input type="color"  v-model="obj.backgroundColor">
<hr>
调整字体的大小<input type="text" v-model="obj.fontSize"><hr>
调整边框的弧度<!--  v-bind   属性绑定, 绑定的值里面是js的合法表达式    --><input type="range"  :min=" minval *2 + 9"  :max="maxval" v-model="ccc"><hr>
</template>
<script   setup>
import {ref,  reactive  , computed} from 'vue'
const minval=ref(1);
const maxval =ref(50);
const ccc =ref(0)
// 实现边框弧度的调节
const bor = computed(()  =>   ccc.value + 'px');
const obj = reactive({color: '',fontSize: "",backgroundColor:'', 'border-radius': '1px',border:'2px dashed',padding:'20px',})const obj2 = reactive({margin:"200px",borderRadius:bor}
)
</script><style>p {color: red;border: 1px solid;background-color: lightblue;border: 2px dashed;padding: 20px;}
</style>
  • 效果如下:

    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/28342.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【秋招突围】2024届秋招笔试-小红书笔试题-第二套-三语言题解(Java/Cpp/Python)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系计划跟新各公司春秋招的笔试题 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f4e7; 清隆这边…

诊断解决方案——CANdesc和MICROSAR

文章目录 一、CANdesc二、MICROSAR一、CANdesc canbeded是Vector汽车电子开发软件Nun Autosar标准的工具链之一。 canbeded是以源代码的形式提供的可重用的组件,包括CAN Driver,交互层(IL),网络管理(NM),传输层(TP),诊断层(CANdesc) , 通信测量和标定协议(CCP,XCP) 和 通信控…

404 页面代码

<template> <div class"container"><h1>404</h1> <div ><p class"text-center">当前页面无法访问,可能没有权限或已删除</p><p class"text-center"> 去别处看看吧</p> </div> <…

Internet Download Manager(IDM6.41)软件安装包下载及安装教程

Internet Download Manager有一个智能下载逻辑加速器&#xff0c;具有智能动态文件分割和安全的多部分下载技术&#xff0c;可以加速下载。与其他下载加速器和管理器不同&#xff0c;Internet下载管理器在下载开始之前对文件进行分段&#xff0c;而Internet下载管理器在下载过程…

[Linux] TCP协议介绍(2): TCP协议的“三次握手“过程分析、超时重传机制介绍...

上一篇文章中, 已经介绍了TCP协议的数据格式, 简单分析了其与UDP协议 关于可靠性方面的差异 本篇文章, 介绍分析一下 使用TCP协议通信, 非常重要的一个过程: 三次握手 TCP的"三次握手" TCP协议是有连接的传输层协议, 即使用TCP协议通信, 是需要建立连接的 TCP协议…

JVM-基础知识

JVM-基础知识 什么是JVM JVM是一种跨语言的平台&#xff0c;任何语言只要能编译成.class文件都可以被JVM运行。JVM只和.class文件有关系&#xff0c;和Java语言没关系。JVM是一种虚拟机规范。 java文件是如何交给JVM执行的 JVM的常见实现 HostStop:Oracle官方另外还有IBM的J9、…

Java--Arrays类

1.数组的工具java.util.Arrays 2.由于数组对象本身并没有什么方法可以供我们调用&#xff0c;但API中提供了一个工具类Arrays供我们使用&#xff0c;从而可以对数据对象进行一些基本的操作。 3.查看JDK帮助文档 4.Arrays类中的方法都是static修饰静态的静态方法&…

MyBatis操作数据库(一)

什么是MyBatis? MyBatis是一个优秀的持久层框架&#xff0c;⽤于简化JDBC的开发。 MyBatis本是Apache的⼀个开源项⽬iBatis&#xff0c;2010年这个项目由apache迁移到了googlecode&#xff0c;并且改名为MyBatis。 简单来说MyBatis是更加简单完成数据和数据库交互的框架 什么…

2-6 基于matlab2018B的语音信号降噪和盲源分离GUI界面

基于matlab2018B的语音信号降噪和盲源分离GUI界面&#xff0c;包括维纳滤波&#xff0c;小波降噪、高通、低通、带通滤波&#xff0c;及提出的滤波方法。每个功能均展示降噪前后声音效果并外放出来。程序已调通&#xff0c;可直接运行。 2-6 语音信号降噪 盲源分离 GUI界面 - 小…

canvas学习

Canvas API 提供了一个通过 JavaScript 和 HTML 的 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas 的基本用法 <canvas> 元素 <canvas id"tutorial" width"150" height"150&quo…

[Python]Anaconda相关命令

环境操作相关命令 查看所有环境 conda env list创建环境 conda create --name cahttts python3.10激活环境 conda activate cahttts安装依赖文件 pip install -r requirements.txt查看GPU型号 nvidia-smi -LGPU 0: NVIDIA A10 (UUID: GPU-9f1fc9cf-582a-25ac-849c-2f77343…

ESD与EOS区别

最近小白在做项目时&#xff0c;被一个实习生问道了&#xff0c;关于EOS与ESD区别。说实话&#xff0c;以前专注于测试debug的我&#xff0c;在回答对方时&#xff0c;并没法做到太全面的解答。于是乎&#xff0c;借助周内的空闲时间&#xff0c;小白还是简单学习总结了一番。 …

Harbor镜像中心搭建

文章目录 Harbor镜像中心搭建前置条件下载Harbor创建CA证书配置Harbor开始启动地址映射访问配置本地登录配置外部虚拟机访问 Harbor镜像中心搭建 Harbor是一个镜像中心&#xff0c;我们所熟知的DockerHub就是一个镜像中心&#xff0c;我们可以把我们打包的镜像放在镜像中心中供…

关于Java

关于Java Java语言关于并发JVM调优工具写在最后 Java语言 Java语言作为当下主流开发语言&#xff0c;其面向对象的开发模式以及一次编译多次运行&#xff0c;跨平台运行以及自动的垃圾回收机制可以说是给开发者节省了很大的时间用于逻辑功能的开发&#xff0c;那么在开发过程中…

【Linux】pycharmgit相关操作

目录 1. git安装配置2. 相关内容3. pycharm连接远程仓库3.1 配置3.2 clone远程仓库3.3 本地仓库上传远程 4. 分支管理4.1 更新代码4.2 新建分支4.3 分支合并4.4 代码比对 5. 版本管理6. 命令行操作6.1 配置git6.2 基础操作6.3 分支操作 1. git安装配置 下载链接&#xff1a;官…

07--Zabbix监控告警

前言&#xff1a;和普米一样运维必会的技能&#xff0c;这里总结一下&#xff0c;适用范围非常广泛&#xff0c;有图形化界面&#xff0c;能帮助运维极快确定问题所在&#xff0c;这里记录下概念和基础操作。 1、zabbix简介 Zabbix是一个基于 Web 界面的企业级开源解决方案&a…

【C++】C++入门的杂碎知识点

思维导图大纲&#xff1a; namespac命名空间 什么是namespace命名空间namespace命名空间有什么用 什么是命名空间 namespace命名空间是一种域&#xff0c;它可以将内部的成员隔绝起来。举个例子&#xff0c;我们都知道有全局变量和局部变量&#xff0c;全局变量存在于全局域…

SQLAlchemy:filter()和filter_by()的微妙差异

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 在Python编程中&#xff0c;SQLAlchemy是一个强大的ORM&#xff08;对象关系映射&#xff09;工具&#xff0c;它允许使用Python代码来操作数据库。然而&#xff0c;对于新手来说&#xff0c;SQLAlchemy中的一些函数…

mybatis-plus使用拦截器实现sql完整打印

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 个人IP&#xff1a;shigen 在使用mybatis-plus&#xff08;mybatis&#xff09;的时候&#xff0c;往往需要…

英伟达开源最强通用模型Nemotron-4 340B:开启AI合成数据新纪元

【震撼发布】 英伟达最新力作——Nemotron-4 340B,一个拥有3400亿参数的超级通用模型,震撼登场!这不仅是技术的一大飞跃,更是AI领域的一次革命性突破! 【性能卓越】 Nemotron-4 340B以其卓越的性能超越了Llama-3,专为合成数据而生。它将为医疗健康、金融、制造、零售等行…