样式的双向绑定的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; 清隆这边…

TalkingData数据统计,如何统计?

Ai文章推荐 1 作为程序员&#xff0c;开发用过最好用的AI工具有哪些&#xff1f; 2 Github Copilot正版的激活成功&#xff0c;终于可以chat了 3 idea,pycharm等的ai assistant已成功激活 4 新手如何拿捏 Github Copilot AI助手&#xff0c;帮助你提高写代码效率 5 Jetbrains的…

Java 中的重写(Override)与重载(Overload)

在Java编程语言中&#xff0c;“重写”&#xff08;Override&#xff09;和“重载”&#xff08;Overload&#xff09;是两个重要且常见的概念&#xff0c;它们虽然名字相近&#xff0c;但在功能、使用场景和实现方式上有着显著的区别。重写&#xff08;Override&#xff09;指…

诊断解决方案——CANdesc和MICROSAR

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

TS中null和undefined特殊性

NUll&undefined null 与 undefined 也是变量类型&#xff0c;用于定义值为 null 或 undefined undefined 类型只包含一个值undefined&#xff0c;表示未定义&#xff08;即还未给出定义&#xff0c;以后可能会有定义&#xff09;。// undefined let Sakun09: undefined un…

嵌入式开发工具代码

文章目录 将字符串中的小写字母转换为大写循环队列&#xff08;Circular Buffer&#xff09;断言&#xff08;Assertion&#xff09;位域反转&#xff08;Bit Reversal&#xff09;固定点数运算&#xff08;Fixed-Point Arithmetic&#xff09;字节序转换&#xff08;Endiannes…

Rust创建基准测试bench

打开终端&#xff08;或命令提示符&#xff09;。 导航到父目录。 将 Rust 编译器切换到 nightly 版本&#xff1a; rustup default nightly 在该目录下运行 cargo init 命令来创建一个新的 Rust 项目&#xff0c;这将在当前目录下创建 Cargo.toml 和 src 目录&#xff1a; …

1430. 迷宫出口

一天Extense在森林里探险的时候不小心走入了一个迷宫,迷宫可以看成是由 ��nn 的格点组成,每个格点只有 22 种状态, 00 和 11,前者表示可以通行后者表示不能通行。 同时当Extense处在某个格点时,他只能移动到东南西北(或者说上下左右)四个方向之一的相邻格点上,Extense…

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下载管理器在下载过程…

Web前端引用图:深度解析与实践指南

Web前端引用图&#xff1a;深度解析与实践指南 在Web前端开发中&#xff0c;引用图&#xff08;Dependency Graph&#xff09;是一个至关重要的概念&#xff0c;它有助于我们更好地理解和管理项目的依赖关系。www.rmrbggkd.com本文将从四个方面、五个方面、六个方面和七个方面…

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

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

一千题,No.0070(组合数的和)

给定 N 个非 0 的个位数字&#xff0c;用其中任意 2 个数字都可以组合成 1 个 2 位的数字。要求所有可能组合出来的 2 位数字的和。例如给定 2、5、8&#xff0c;则可以组合出&#xff1a;25、28、52、58、82、85&#xff0c;它们的和为330。 输入格式&#xff1a; 输入在一行…

【Android面试八股文】HandlerThread是什么?有什么使用场景?

文章目录 一、HandlerThread是什么?1.1 HandlerThread 简介1.2 HandlerThread 源码分析1. 构造函数2. run 方法3. 获取 Looper4. 退出 Looper5. 总结二、HandlerThread有什么使用场景示例代码一、HandlerThread是什么? 1.1 HandlerThread 简介 HandlerThread 是 Android 提…

编程基础知识编程实例解析:深度探索与实战应用

编程基础知识编程实例解析&#xff1a;深度探索与实战应用 编程&#xff0c;作为现代信息社会的核心技能之一&#xff0c;对于理解和应用计算机技术具有至关重要的意义。然而&#xff0c;编程的深奥和复杂常常让人望而生畏。本文将从四个方面、五个方面、六个方面和七个方面对…

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修饰静态的静态方法&…

前端开发之计算机网络模型认识

上一篇&#x1f449;: 前端开发之HTTP3 文章目录 网络模型1.OSI七层模型详解1.应用层2.表示层3.会话层4.传输层5.应网络层6.数据链路层7.物理层 2.TCP/IP五层协议模型3.DNS解析过程及缓存4.HTTP长连接与短连接5.HTTPS的工作原理及与HTTP区别工作原理&#xff1a;在HTTP基础上加…

Spring多数据源管理方案

Spring多数据源管理方案 基于Spring的AbstractRoutingDataSource实现多数据源 数据库连接配置 spring:application:name: dynamic-sourcedatasource:datasource1:jdbc-url: jdbc:mysql://localhost:3306/cloud-demo?useUnicodetrue&characterEncodingutf-8&useSSLf…

【Python高级编程】图表类型指南:何时使用折线图、散点图、柱状图和饼状图

图表类型指南&#xff1a;何时使用折线图、散点图、柱状图和饼状图 在数据可视化中&#xff0c;选择合适的图表类型对于有效传达信息至关重要。以下是四种最常见的图表类型及其用途&#xff1a; 折线图 折线图用于显示数据随时间或其他连续变量的变化趋势。它们对于识别趋势…